Integrar rollover CSS

Ekbrilo · #1 (**permalink**) 19/02/2008, 05:34

Estoy probando un rollover css como el explicado en http://ervdesign.net/blog/?p=88. Cuando lo ensayo como contenido único de un documento html el resultado es perfecto, pero si trato de incluirlo en una página que ya tiene su propio código, no logro que se muestre la imagen ni antes ni después de pasar el cursor. Eso sí, el enlace funciona, pues al clicar sobre el espacio en blanco en el que debiera estar la foto, el link lleva al documento prefijado como destino.

He pensado que esto puede deberse a dos causas:

* en la cabecera de la página aplico un estilo a los enlaces de la misma, concretamente quitar el subrayado y especificar los colores de a y a:hover Justo bajo esa parte del código pongo el del rollover css tal y como figura en el tutorial. ¿Tendría que retocar algo ahí?

* No obstante lo dicho arriba, creo que la cosa tiene quizá más que ver con
la ruta de la imagen. Lo que en el ejemplo es url(img/foto.jpg), ¿tendría que ser
en mi caso url(../imagenes/foto.jpg) o algo parecido?

cleft · #2 (**permalink**) 19/02/2008, 16:50

De acuerdo a tus preguntas:

1. No deberia existir problemas con esas reglas CSS que dices aplicas a los links al principio, puesto que el dicho "efecto" trabaja en base a su propia clase .rollover, y es un simple cambio de posicionamiento de la imagen de fondo.

2. Ese deberia ser el problema. Si no se muestra la imagen, entonces es que la estas "llamando" desde un path incorrecto. El mismo deberia ser de acuerdo a donde tienes la imagen.
Eso, pues, no te podriamos ayudar porque habria que saber la ubicacion de la imagen en el sitio.

Avisanos. :)

Ekbrilo · #3 (**permalink**) 20/02/2008, 05:43

Gracias por tu respuesta, Cleft. Sí, yo también me inclino a pensar que ése debe de ser el problema, la ruta para enlazar la imagen. La he revisado y parece correcta, por lo que el asunto me tiene intrigado; no obstante voy a revisarlo todo de nuevo por si acaso. Normalmente, la ruta de una imagen suele ser algo así como ../imagenes/foto.jpg ¿Es acertado escribir url(../imagenes/foto.jpg) en el caso que planteo? Lo pregunto porque a veces basta un error mínimo en el código para que la imagen no se vea...

cleft · #4 (**permalink**) 20/02/2008, 11:23

Pues, no es normalmente. Todo depende, como te dije antes, de la ubicacion de la misma.

Si tu imagen esta ubicada en el mismo directorio del CSS, suficiente con llamarla con:
(foto.jpg)

Si esta en un nivel arriba del directorio donde se encuentra el archivo CSS:
(../foto.jpg)

Y asi sucesivamente.

Lo que puedes probar para salir de dudas es escribiendo todo el URI de la imagen, ej:
url(http://tuwebsite.com/imagenes/foto.jpg)

Y si te trabaja, entonces sabras que has escrito mal el path de la imagen en tus pruebas anteriores.

Ekbrilo · #5 (**permalink**) 20/02/2008, 11:31

Gracias de nuevo, lo haré así como dices y postearé el resultado.

Ekbrilo · #6 (**permalink**) 21/02/2008, 05:02

Ya está solucionado, todo se debía a un pequeño error: tras la dirección url de la imagen -dato que se incluye dos veces a lo largo del código-, en una de ellas faltaba el guión de no-repeat. Sin embargo, y para no desaprovechar tu consejo, Cleft, lo ensayé luego varios veces, y no cabe duda de que es la mejor alternativa para casos de ruta dudosa.

Gracias y un saludo.