Link que al pasar por encima deja ver una imagen

luanga · #1 (**permalink**) 02/05/2002, 17:54

Estimado amigos:
Estoy haciendo una página donde aparecen bastantes fotos ligadas a nombres, quiero que según posicionemos el ratón encima del link correspondiente a la imagen esta aparezca en un espacio predefinido de la pantalla.

¿Teneis algún código?
Gracias

salvador62 · #2 (**permalink**) 02/05/2002, 20:38

en el link colocas una onmouseover="nombre_de_tu_función()"

y previamente habrás definido el script de nombre_de_tu_función() con la carga en una parte de la pantalla de la imagen.

usuario · #3 (**permalink**) 03/05/2002, 10:49

Hola,me lo puedes explicar mejor?por ejemplo,una foto de una rosa,dónde se pone ese link

caricatos · #4 (**permalink**) 03/05/2002, 13:21

Hola luanga:

Espero que lo que quieres sea algo así:

El sitio donde quieres que se vea el nombre, puede ser cualquier etiqueta, voy a poner un div en el ejemplo:

<div id=nombre></div>

Como puedes ver, dentro del div no hay nada, pero es donde tiene que aparecer el nombre.

Si quieres que sirva solo en explorer, puedes referenciarlo con nombre.innerHTML="pepito" (este ejemplo solo es válido con pepito); pero para que sirva también para Navigator (la versión 6 o superior de ambos -no lo sé en otras versiones) se referencia con document.getElementById("nombre").innerH TML="pepito"...

Entonces en el fichero de pepito tienes que poner algo así:

<img src="juanito.jpg" onmouseover="document.getElementById('nombre' ).innerHTML='pepito'" >

Para borrarlo tienes que poner la cadena vacía en "onmouseout".

Espero que te sirva.

luanga · #5 (**permalink**) 03/05/2002, 18:50

Muchas gracias por las contestaciones. Veo que no me he expresado con total claridad. Os pido perdón. :(

Vereis, estoy haciendo una página para una empresa que tiene un amplio catálogo de fotografías y en una de las páginas quiero que estén los nombres de los productos (ligados a las fotos). En la misma página, quiero, que al pasar con el ratón por encima de cada nombre de producto aparezca en una sección de la misma página la foto del producto en la cual se encuentra el ratón posicionado.

De nuevo gracias

KarlanKas · #6 (**permalink**) 04/05/2002, 03:45

Hola Luanga!!

Dime si es esto lo que quieres:
------------------
<html>
<head>
<title>Prueba</title>
<script>
function cambia(archivo,explicacion){
foto.src=archivo;
descripcion.innerHTML=explicacion;
}
function quitar(){
foto.src='logo.jpg';
descripcion.innerHTML='pulse el producto deseado';}
</script>
</head>

<body>
<div style="position:absolute;top:50px;left:50px;w idth:250px;text-align:center;">
<img id="foto" src="logo.jpg" height="100" width="100" border="0"><br>
<p id="descripcion">pulse el producto deseado</p>
</div>

<table style="position:absolute; top:100;right:10px;border:none;">
<tr>

<td> <a href="#" onmouseover="cambia('foto1.jpg','Es un articulo muy bonito')" onmouseout="quitar()">foto 1</a></td>
</tr>
<tr>

<td> <a href="#" onmouseover="cambia('foto2.jpg','En color rojo')" onmouseout="quitar()">foto 2</a></td>
</tr>
<tr>

<td> <a href="#" onmouseover="cambia('foto3.jpg','Sirve para todo')" onmouseout="quitar()">foto 3</a></td>
</tr>
</table>

</body>
</html>
-----------------------

Salu2

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="190" height="51"><param name="bgcolor" value="#0066CC"><param name="movie" value="http://www.webareyou.com/Movie1.swf"><embed src="http://www.webareyou.com/Movie1.swf"></embebed></object>

luanga · #7 (**permalink**) 07/05/2002, 15:41

Estimado karlankas:

En fecto es lo que pretendía pero no me carg las imagenes que referencio desde el directorio de ubicación.

Muchas gracias por el apoyo, voy a analizar el código, para hacerlo funcionar.

Recibe un cordial saludo

KarlanKas · #8 (**permalink**) 10/05/2002, 06:07

Luanga!

Perdona que no te contestara antes, pero es que no me acordaba de este "Post"

no entiendo porque no te funciona! deberías poner si está en un subdirectorio lo siguiente:
----------------
<td> <a href="#" onmouseover="cambia('subdirectorio/ foto3.jpg','Sirve para todo')" onmouseout="quitar()">foto 3</a></td>
----------------

Espero que te funcione!!

Si están todas las imágenes en el mismo subdirectorio podrías cambiar, en vez de lo de arriba, lo siguiente:
--------------------
function cambia(archivo,explicacion){
foto.src='directorio/'+ archivo;
descripcion.innerHTML=explicacion;
}
--------------

Recibe un saludo!!

KarlanKas

luanga · #9 (**permalink**) 17/05/2002, 07:37

KarlanKas, muchas gracias por tu preocupación. Como te decía en el mensaje anterior ya me funciona, lo cual te agradezco mucho.

No te preocupes por la tardía contestación, pues como te digo ya lo conseguí hacer funcionar.

Muchas gracias y un saludo KarlanKas.