Foros del Web » Creando para Internet » CSS »

Adaptando un rollover

Estas en el tema de Adaptando un rollover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/03/2007, 07:34
Usuario no validado
 
Fecha de Ingreso: marzo-2004
Mensajes: 349
Antigüedad: 13 años, 8 meses
Puntos: 0
Adaptando un rollover

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;
}
  #2 (permalink)  
Antiguo 21/03/2007, 17:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Adaptando un rollover

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.
  #3 (permalink)  
Antiguo 22/03/2007, 03:48
Usuario no validado
 
Fecha de Ingreso: marzo-2004
Mensajes: 349
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Adaptando un rollover

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)?
  #4 (permalink)  
Antiguo 22/03/2007, 18:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Adaptando un rollover

Cita:
Iniciado por JBRS Ver Mensaje
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.
  #5 (permalink)  
Antiguo 26/03/2007, 04:58
Usuario no validado
 
Fecha de Ingreso: marzo-2004
Mensajes: 349
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Adaptando un rollover

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...
  #6 (permalink)  
Antiguo 26/03/2007, 05:49
Usuario no validado
 
Fecha de Ingreso: marzo-2004
Mensajes: 349
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Adaptando un rollover

Ya ta solucionao, lo tengo bastante avanzado gracias al ejemplo de http://www.forosdelweb.com/showthrea...light=rollover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:32.