Adaptando un rollover

[JBRS]

Hola estoy usando este texto de ejemplo, lo que no sé es cómo utilizarlo para más de una imagen, ya que esto es sólo para una. ¿Qué tendría que hacer poner identificadores delante de la a?



a {
outline: none;
}

.rollover {
display: block;
width: 210px;
height: 144px;
background: url(img/rollover.jpg) no-repeat;
text-indent: -9999px;
}

a.rollover:link, a.rollover:visited, a.rollover:active {
background: url(img/rollover.jpg) no-repeat;
}

a.rollover:hover {
background-position: -210px;
}

[Mikmoro]

Mi opinión:
creo que lo que debes hacer es darle al selector "a" las propiedades que le has dado a la clase rollover, dejándole a ésta sólo la imagen, y luego hacer una clase o un id para cada imagen. Esto sería más o menos:


a {
outline: 0;
display: block;
width: 210px;
height: 144px;
text-indent: -9999px;
}
a:hover {
background-position: -210px;
}
#rollover {
background: url(img/rollover.jpg) no-repeat;
}
#rollover2 {
background: url(img/rollover2.jpg) no-repeat;
}
#rollover3 {
background: url(img/rollover3.jpg) no-repeat;
}

Y luego:

<a id="rollover" href="#"></a>
<a id="rollover2" href="#"></a>
<a id="rollover3" href="#"></a>

o lo que sea.

Mikel.

[JBRS]

Esto definitivamente me confunde... ¿Y eso no afectaría a todos los <a>? ¿ahí dónde se define la imagen a mostrar "normal" (sin ratón encima)?

[Mikmoro]

Iniciado por JBRS

Esto definitivamente me confunde... ¿Y eso no afectaría a todos los <a>? ¿ahí dónde se define la imagen a mostrar "normal" (sin ratón encima)?

Sí, claro. No sabía que fueras a tener otros enlaces. En ese caso, para que afecte sólo a los "a" que estén dentro de un contenedor "X", deberías sustituir "a" por

#contenedor a {...etc., y lo mismo a las otras etiquetas del ejemplo.

Por otro lado, la imagen a mostrar se define en cada uno de los "id" de cada vínculo. Decías que lo querías para varias imágenes distintas, y eso es lo que es. Quizá querías hacer otra cosa y no te entendí bien.

Mikel.

[JBRS]

MMM intento así:

#secciona a {
outline: 0;
display: block;
width: 210px;
height: 144px;
text-indent: -9999px;
}
#secciona a:hover {
background-position: -210px;
}
#rolloversecciona {
background: url('/imagenescabecera3/cabecera-secciona-over.gif') no-repeat;
}
#rolloversecciona2 {
background: url('/imagenescabecera3/cabecera-secciona-over.gif') no-repeat;
}
#rolloversecciona3 {
background: url('/imagenescabecera3/cabecera-secciona-over.gif') no-repeat;
}


y con este html:

<ul id="menuimg">
<li id="secciona-link"><a id="rolloversecciona" href="#"></a>
<a id="rolloversecciona2" href="#"></a>
<a id="rolloversecciona3" href="#"></a></li>

</ul>


Pero dudo que aquí haya nada correcto. Sobre todo los <a id> finales del html, supongo que sólo debería haber uno... Confusing...

[JBRS]

Ya ta solucionao, lo tengo bastante avanzado gracias al ejemplo de http://www.forosdelweb.com/showthrea...light=rollover