Mostrar imagen al pasar mouse por una url

needles · #1 (**permalink**) 26/12/2011, 02:47

Que tal compañeros, la verdad me eh roto la cabeza pensando, cómo puedo hacer que salga una imagen al pasar el mouse sobre un link, eh intentado con ésto :

Código HTML:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function img_sobre(imgname){
imgname.src = "/tutores/images/flacha.gif" 
}
function img_fuera(imgname){
imgname.src = "/tutores/images/dot.gif"
}
</SCRIPT>
<center>
<table border=0>
<tr><td>
<img name="pic1" SRC="blank.gif" width=10 height=10 border=0> 
<A HREF="http://www.altavista.com" onMouseOver="img_sobre(pic1)" onMouseOut="img_fuera(pic1)">Altavista</A>
<br>
<img name="pic2" SRC="blank.gif" width=10 height=10 border=0> 
<A HREF="http://www.yahoo.com" onMouseOver="img_sobre(pic2)" onMouseOut="img_fuera(pic2)">Yahoo</A>
<br>
<img name="pic3" SRC="blank.gif" width=10 height=10 border=0> 
<A HREF="http://www.hotbot.com" onMouseOver="img_sobre(pic3)" onMouseOut="img_fuera(pic3)">Hotbot</A>
<br>
<img name="pic4" SRC="blank.gif" width=10 height=10 border=0> 
<A HREF="http://www.google.com" onMouseOver="img_sobre(pic4)" onMouseOut="img_fuera(pic4)">Google</A>
<br>
<img name="pic5" SRC="blank.gif" width=10 height=10 border=0> 
<A HREF="http://www.tutores.org" onMouseOver="img_sobre(pic5)" onMouseOut="img_fuera(pic5)">Tutores</A>
<br>
<img name="pic6" SRC="blank.gif" width=10 height=10 border=0> 
<A HREF="http://www.forosdelweb.com" onMouseOver="img_sobre(pic6)" onMouseOut="img_fuera(pic6)">Forosdelweb</A>
<br>
</td></tr></table>
</center>

Pero la verdad no es lo deseado, ya que quiero que para cada enlace haya una imagen diferente, me explico? espero puedan ayudarme,desde ya gracias !

cristian_cena · #2 (**permalink**) 26/12/2011, 03:32

Hola needles:
Si podes poner la imagen dentro del enlace podes partir de este código (y resolverlo solo con css [ie7+]):

Código HTML:

Ver original<a href="#">
<!-- los atributos de 'img' mejor si los colocas en el css -->
<img src="blank.gif" alt="descripcion accesibilidad"/> 
</a>

Código CSS:

Ver originala:hover img{
display:block;
}
img{
display:none;
width:10px;
height:10px;
border:0;
}

Veo que estas trabajando con javascript, hay un foro de javascript en el que te podrán ayudar también.

Si usas javascript/jquery podes partir de esto: http://jsfiddle.net/cristian_cena/4vXbM/
Lo mas fácil en estos casos es que la imagen y el enlace compartan alguna relación de parentesco cercana para poder generalizar con los métodos "traversing" de jquery.
Si no, es posible también, pero podrá ser un poco más complejo dependendo del diseño que tengas.

Saludos.

needles · #3 (**permalink**) 26/12/2011, 03:57

Cita:

Iniciado por cristian_cena

Hola needles:
Si podes poner la imagen dentro del enlace podes partir de este código (y resolverlo solo con css [ie7+]):

Código HTML:

Ver original<a href="#">
<!-- los atributos de 'img' mejor si los colocas en el css -->
<img src="blank.gif" alt="descripcion accesibilidad"/> 
</a>

Código CSS:

Ver originala:hover img{
display:block;
}
img{
display:none;
width:10px;
height:10px;
border:0;
}

Veo que estas trabajando con javascript, hay un foro de javascript en el que te podrán ayudar también.

Si usas javascript/jquery podes partir de esto: [url]http://jsfiddle.net/cristian_cena/4vXbM/[/url]
Lo mas fácil en estos casos es que la imagen y el enlace compartan alguna relación de parentesco cercana para poder generalizar con los métodos "traversing" de jquery.
Si no, es posible también, pero podrá ser un poco más complejo dependendo del diseño que tengas.

Saludos.

Gracias colega, bien pues espero poderme basar en el link que me has dado, la verdad es que lo que quiero es que al señalar un enlace , aparezca una imagen, pero claro los enlaces los haré dinámicamente (por PHP, obteniendo las url de los enlaces mediante la DB);
Y pues como verás no me sirvirá de nada emplear en éste caso CSS,gracias y echaré un buen ojo al enlace que me has dado,GRACIAS!

cristian_cena · #4 (**permalink**) 26/12/2011, 04:14

Cita:

Iniciado por needles

pero claro los enlaces los haré dinámicamente ... PHP ... DB .. Y pues como verás no me sirvirá de nada emplear en éste caso CSS

Nada más dentro del while o del foreach podrías colocar también el enlace y luego trabajar con clases (class=""). De este modo el css funcionaría sin problemas.

Podes entrar en este sitio y pinchando en traversing ver muchos demos. jquery es fantástico para moverse por el dom, yo aprovecharía esto :)
Cualquier cosa avisa, saludos.

kseso? · #5 (**permalink**) 26/12/2011, 09:35

Bonita tabla y bonito script... para el foro de css.

Estamos ante una cuestión doble.
La primera, ajena a css, sería cómo etiquetar (html) una información obtenida de la bd para poder ser manipulada vía css (segunda) para su presentación al visitante.

Sin entrar en qué conviene, si listas o tablas, y atendiendo sólo a lo expuesto, texto+imagen en un enlace, el etiquetado sería algo tan sencillo como:

Código html:

Ver original<a href="#" ....>texto <img src="..." alt="" /></a>

Y con el css ocultar la imagen de dentro del enlace (display: none) y mostrarla al a:hover img

Claro está que habría que definir alguna clase o id a estos enlaces (o a su ancestro) para diferenciarlos del resto y añadir algo más de css. Pero funcionalmente es la base.