Unir un enlace a una web con imagen en javascript

Me gustaría saber que código javascript he de poner en una web, para que en un enlace a otra web, al pasar con el ratón por encima del enlace, aparezca una imagen en la misma página, y que al alejar el cursor desaparezca.

1 respuesta

Respuesta
1
Mi pregunta es si la imagen que quieres mostrar reemplaza a otra, si va en un marco flotante está fija en algún sitio, por último, ¿la imagen que desea mostrar es una sola de un enlace o quiere hacer lo mismo con diferentes vínculos?
La imagen remplazaría al nombre del enlace, por ejemplo, si el nombre del enlace fuese "todoexpertos" al pasar el ratón desaparecería este nombre y aparecería la imagen correspondiente. Y además de este enlace habría otros cuantos enlaces diferentes, con los cuales al pasar aparezca la imagen correspondiente a cada enlace.
Un saludo y gracias.
Aquí se te plantea un posible problema.
Si tienes los enlaces estructurados en tablas, al hacer el cambio del link a imagen se te va a descuadrar y desestructurar la tabla, si ya tienes eso asimilado o contabas con ello, coméntamelo y te seguiré explicando.
Por otro lado si no quieres que se te desestructure, podrías hacerlo con imágenes flotantes, que al pasar por encima del enlace se mostraría la foto como una imagen flotante o se podría hacer como una especie de marco con una POR para cerrar dicha imagen. Entonces el link no desaparecería si no que quedaría solapado encima por la imagen.
Hola.
Pues si, mejor las imágenes flotantes para que no se me descuadre.
Saludo.
¿Pero con la POR para cerrar la imagen o que desaparezca cuando salga del link?
Si es que desaparezca cuando salga del link, tenga en cuenta que la imagen tiene que mostrarse al lado de donde esté el ratón, para no obstruir el enlace, si no, al solapar la imagen el link habría algún tipo de fallo.
Casi mejor con la X.
He creado un código que espero que te sirva, te explico un poco como funciona y como lo tienes que poner.
En cada enlace de tu web que quieras hacer este efecto tienes que ponerle el enlace a la función con la imagen que quieres mostrar en ese link, ejemplo:
<a href="www.direccion-enlace.com" onmouseover="muestraima('001.jpg',event);" > enlace1 </a>
Donde: 001.jpg -> es el nombre de la imagen que quieres mostrar, tienes que hacer lo mismo en cada enlace que quieras hacer el efecto pero cambiando el nombre de la imagen para cada enlace. Solo tienes que cambiar el nombre de la imagen lo demás que está en negrita se queda como está.
Te he creado un marco flotante de color gris con una POR, lo puedes cambiar a tu antojo. Éste es el código que tienes que incorporarle a la web:
Esto lo tienes que poner dentro de los
<head>
</head>
:

<script languaje="text/javascript">
 function muestraima(imagen,event){
  document.getElementById("img_sustituta").src=imagen;
  document.getElementById("contenedor").style.visibility="visible";
  var px, py;
  if (!document.all){
   event = ev;
   py = ev.pageY;
   px = ev.pageX;
  }else{
   py = event.clientY
   px = event.clientX
  }
  document.getElementById("contenedor").style.left=px+40;
  document.getElementById("contenedor").style.top=py+40;
 }
 function cierrame(){
  document.getElementById("contenedor").style.visibility="hidden";
 }
</script>

Esto dentro del
<body>
</body>
:

<div id="contenedor" style="position:absolute;visibility:hidden;top:0px;left:0px;">
<table style="background-color:#BDBDBD;">
<tr>
<td style="padding-left:8px;padding-right:2px;text-align:right;font-weight:bold;font-
family:arial;color:#F2F2F2;cursor:pointer;">
<p onclick="cierrame();">X</p>
</td>
<tr>
<td>
<img id="img_sustituta" src="" width="100px">
</td>
</tr>
</table>
</div>
Hola. Creo que tengo algo mal escrito. La imagen es "IMG_4042.JPG"
html>
<head>
<script languaje="text/javascript">
 function muestraima(imagen,event){
  document.getElementById("img_sustituta").src=imagen;
  document.getElementById("contenedor").style.visibility="visible";
  var px, py;
  if (!document.all){
   event = ev;
   py = ev.pageY;
   px = ev.pageX;
  }else{
   py = event.clientY
   px = event.clientX
  }
  document.getElementById("contenedor").style.left=px+40;
  document.getElementById("contenedor").style.top=py+40;
 }
 function cierrame(){
  document.getElementById("contenedor").style.visibility="hidden";
 }
</script>
</head>
<body>
<div id="contenedor" style="position:absolute;visibility:hidden;top:0px;left:0px;">
<table style="background-color:#BDBDBD;">
<tr>
<td style="padding-left:8px;padding-right:2px;text-align:right;font-weight:bold;font-
family:arial;color:#F2F2F2;cursor:pointer;">
<p onclick="cierrame();">X</p>
</td>
<tr>
<td>
<img id="IMG_4042.JPG" src="25" width="100px">
</td>
</tr>
</table>
</div>
<a href="www.direccion-enlace.com" onmouseover="muestraima(IMG_4042.JPG',event);" > enlace1 </a>
</body>
</html>
Saludos.
Efectivamente, como tu bien dices, te falta la primera comilla simple de la imagen, mira, has puesto:
onmouseover="muestraima(IMG_4042.JPG',event);" >
y falta una comilla, así:
onmouseover="muestraima('IMG_4042.JPG',event);" >
Hola.
Ya he arreglado el problema de la coma, pero desgraciadamente cuando lo pruebo y me da error en la página.
Saludos
Si quieres, ponme el código entero de la web y lo miramos.
Cuando quieras pégame el código de la web y podemos revisar el fallo que te da, seguramente no habrá problema. Por descartar, ¿qué navegador usaste? Te comprobé el código con: Explorer, Firefox y Chrome y funcionó correctamente.
Te espero compañero.
Este es el código lo he probado en el ordenador y en mi página, y en todos los casos me da error en la página, puedo acceder al enlace, pero no pasa nada.
Uso el Explorer y el Firefox.
<html>
<head>
<script languaje="text/javascript">
 function muestraima(imagen,event){
  document.getElementById("img_sustituta").src=imagen;
  document.getElementById("contenedor").style.visibility="visible";
  var px, py;
  if (!document.all){
   event = ev;
   py = ev.pageY;
   px = ev.pageX;
  }else{
   py = event.clientY
   px = event.clientX
  }
  document.getElementById("contenedor").style.left=px+40;
  document.getElementById("contenedor").style.top=py+40;
 }
 function cierrame(){
  document.getElementById("contenedor").style.visibility="hidden";
 }
</script>
</head>
<body>
<div id="contenedor" style="position:absolute;visibility:hidden;top:0px;left:0px;">
<table style="background-color:#BDBDBD;">
<tr>
<td style="padding-left:8px;padding-right:2px;text-align:right;font-weight:bold;font-
family:arial;color:#F2F2F2;cursor:pointer;">
<p onclick="cierrame();">X</p>
</td>
<tr>
<td>
<img id="IMG_4042.JPG" src="25" width="100px">
</td>
</tr>
</table>
</div>
<a href="Nuevo documento de texto.html" onmouseover="muestraima('IMG_4042.JPG',event);" > enlace1 </a>
</body>
</html>
Saludos.
Aquí está el fallo:
En su código, no tubo que modificar ésta línea:
<img id="IMG_4042.JPG" src="25" width="100px">
Tiene que dejarla como se la mandé, usted solo tiene que poner la dirección de la imagen en la llamada a la función:
Reemplace la línea en la que aparece:
 <img id="IMG_4042.JPG" src="25" width="100px">
por la del principio, así:
<img id="img_sustituta" src="" width="100px">
Usted solo tiene que poner el nombre y dirección de la imágen aquí:
<a href="Nuevo documento de texto.html" onmouseover="muestraima('IMG_4042.JPG',event);" > enlace1 </a>
Si tuviera mas enlaces con fotos diferentes, haría lo mismo pero en el otro enlace:
<a href="Nuevo documento de texto2.html" onmouseover="muestraima('IMG_4043212132131.JPG',event);" > enlace2 </a>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Insertar google maps en flash

Quisiera me ayudaras a insertar un mapa de "google maps" en mi web flash, de preferencia en AS 2.0 ya tengo el componente GMap, pero no tengo ni idea de como hacerlo funcionar.
1 respuesta

¿Cómo puedo bloquear URL saliente del servidor apache?

Tengo varias paginas en el servidor con distintos usuarios, y quiero bloquear vinculos salientes del servidor, digamos que ninguna pagina o escripto podra vincular a http://midominiobloqueado.com desde el servidor. Uso linux apache2. ¿Se te ocurre...
2 respuestas

Ajustar swf a ventana

Buena zador Me gustaria saber como hacer para que una pelicula de 1440x900 se ajuste a todas las ventanas y navegadores, probe cambiando unos parametros para publicar desde el flash pero en cuanto lo hago mi swf deja de funciona no me carga ni la...
1 respuesta

Ventanas flotantes

Estoy interesado en la manera de hacer ventanas flotantes para mostrar información adicional como imagenes o texto, pero necesito saber como se maneja y como se coloca las coordenadas para ubicar a dicha ventana flotante.
1 respuesta

Como Cambiar color y tamaño texto de este JavaScript

Necesito hacer lo que digo en el título. ¿Puede ayudarme? <p align="left"><!--webbot bot="HTMLMarkup" startspan --> <h2><span id="fly"></span></h2> <script> window.onerror=new Function("return true") //Configure message to display. Use "$" for...
1 respuesta

Cargar una imagen

Estoy interesado en saber si voy por el buen camino. Coloque de fondo en una web una imagen de 750 x 656 pxl. Para ello cree una tabla y en cada celda coloque una imagen parcial del conjunto. Cuando carga la página, la imagen va apareciendo...
1 respuesta

Clásico juego de memoria con javascript

Estoy usando un código que encontré en la red para un juego de memoria (el clásico juego de destapar imágenes de dos en dos y tratar de hacer las parejas). Podés verlo en funcionamiento en: http://www.tunait.com/javascript/scripts/juegos/memoria.htm...
1 respuesta

Botón Imprimir

Espero me puedan ayudar, necesito subir a mi página la función de imprimir un texto. La verdad yo hice algo con Flash de manera que el botón me llame un campo de texto y este es el que se imprime, pero no me sirve esto. Lo necesito de manera que el...
1 respuesta

Htm mostrar un documento según día y hora

Tengo una pagina con varias imágenes con hiperbinculos a documentos pdf, wor, xls, etc Necesito que a partir de un día a una hora determinada al pulsar en esa misma imagen en vez de abrir un documento, abra otro Ejemplo ahora al pinchar en la imagen...
1 respuesta

Cómo hacer un scroll

Me gustaría saber como hacer un scroll con dreamweaver en cuyo interior se ponga un texto y que cuando uno sitúe el ratón sobre la flecha de arriba del scroll el texto se desplace hacia arriba, y si uno pone el ratón sobre el scroll flecha de abajo,...
1 respuesta