Lo modifiqué y logré avanzar un paso. El código es este:
Código HTML:
.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("1.jpg") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
background: url("1b.jpg") 0 0 no-repeat;
}
.rollover a:active {
background-position: 0 -70px;
background: url("1b.jpg") 0 0 no-repeat;
}
<script type="text/javascript">
function aggEvento(){
var links = document.getElementById('rollover').getElementsByTagName('a');
for(i=0; links[i]; i++){
links[i].onclick = function(){
var links = document.getElementById('rollover').getElementsByTagName('a');
for(j=0; links[j]; j++){
links[j].className = "";
}
this.className = 'current';
}
}
}
</script>
</head>
<body id="top" onload="aggEvento()">
<div class="rollover" id="rollover">
<a href="#" class="current">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>
</body> Y ahora me aparece así:
Pero acá viene el tema:
- Si hago click en cualquier parte de la página, la solapa activa (la de color bordo) pasa al estado de las demás. ¿Se puede modificar eso?
- cuando cargo la página, la primer solapa no aparece como activada. ¿Se puede hacer q se active al cargarse la página?
Desde ya, muchas gracias por todo.
Saludos. Picasso