Código :
a.1 {
background: url('1.jpg') left no-repeat;
background-position: 0px ;
text-decoration: none;
pointer:cursor;
padding-left: 124px;
height:33px;
}
a.1:hover {
background: url('1b.jpg') left no-repeat;
background-position: 0px;
text-decoration: none;
padding-left: 124px;
pointer:cursor;
}
a.2 {
background: url('2.jpg') left no-repeat;
background-position: 0px ;
text-decoration: none;
pointer:cursor;
padding-left: 124px;
height:33px;
}
a.2:hover {
background: url('2b.jpg') left no-repeat;
background-position: 0px ;
text-decoration: none;
padding-left: 124px;
pointer:cursor;
}
.........
// código Css hasta la solapa 6
Las solapas tienen 2 imágenes, una ACTIVA y otra INACTIVA (puse números a modo de ejemplo, pero las solapas contienen mas detalles) y al pasar el mouse por arriba hacen el rollover correspondiente. Hasta acá con mi código CSS funciona todo perfectamente... pero ahora viene el pedido de ayuda...
Lo que necesitaría hacer creo que se hace con javascript
y es lo que muestra el ejemplo que les puse en el gráfico siguiente:
Realmente, les agradecería mucho si pudieran ayudarme con esto.
Mil gracias de antemano y un cordial saludo para todos.
Picasso
