Foros del Web » Programando para Internet » Javascript »

onmouseover - Sobre una imagen que aparezca un href

Estas en el tema de onmouseover - Sobre una imagen que aparezca un href en el foro de Javascript en Foros del Web. Buenas, Estoy intentando que con un onmouseover al pasar por encima de una imagen aparezca lo que hay dentro de otra url. Algo así: Código: ...
  #1 (permalink)  
Antiguo 07/12/2009, 11:24
 
Fecha de Ingreso: octubre-2008
Mensajes: 177
Antigüedad: 15 años, 6 meses
Puntos: 1
onmouseover - Sobre una imagen que aparezca un href

Buenas,

Estoy intentando que con un onmouseover al pasar por encima de una imagen aparezca lo que hay dentro de otra url. Algo así:

Código:
<img src="'.$tendencia.'" border=0 onmouseover="location.href="tend.php?tendencia='.$nom.'";">
Pero como soy nuevo en javascript, de hecho sólo estoy utilizándolo para mejorar algunos efectos de php, pues no tengo idea de cómo hacer que funcione bien.

¿Cómo debería hacerlo?

Espero se haya entendido la idea.

GRacias!
  #2 (permalink)  
Antiguo 07/12/2009, 11:50
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años
Puntos: 50
Respuesta: onmouseover - Sobre una imagen que aparezca un href

Mira, no me gusta mucho eso de que te manden a otra página sin hacer click, porque es quitarle control al usuario. Pero si de todos modos quieres hacerlo:
Código HTML:
<img src="tendencia.jpg" border=0 onmouseover="location.href='tend.php?tendencia=laTendencia';"> 
Evidentemente te estabas liando con las comillas. ¿Cómo poner la tendencia si en realidad ésta es una variable?: pues fíjate que $nom (al igual que $tendencia) es una variable de PHP, por lo tanto, cuando se ejecute javascript, ya habrá sido reemplazada por su valor y será un literal de cadena (recuerda que primero se procesa la página en el servidor - trabajo de PHP, JSP, ASP, etc. - y luego se envía al cliente; javascript se ejecuta en el cliente, cuando el lenguaje de servidor ya hizo su trabajo). Es decir que lo que puse arriba es el código que verá el navegador; sin embargo, en tu script PHP debes poner algo así:
Código PHP:
<img src="<?php echo $tendencia;?>" border=0 onmouseover="location.href='tend.php?tendencia='<?php echo $nom;?>';">
Fíjate de poner la línea "fuera" del código PHP, de otro modo tendrás que "escapar" las comillas (todos los caracteres espúreos deben escaparse cuando se imprime en PHP; ¿sino cómo se imprimirían las comillas, los saltos de línea, los tabulados...?):
Código PHP:
<?php
echo "<img src=\"'".$tendencia."'\" border=0 onmouseover=\"location.href='tend.php?tendencia=".$nom."'\">";
?>
Este último código sí que va "dentro" del código PHP. ¡Suerte!

PD: ¿qué es un "efecto de PHP"?
  #3 (permalink)  
Antiguo 07/12/2009, 12:04
 
Fecha de Ingreso: octubre-2008
Mensajes: 177
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: onmouseover - Sobre una imagen que aparezca un href

Hola!

Gracias por tan detalladas explicaciones, funciona a la perfección, lo que pasa que no era lo que yo quería buscar... lo que deseo es que la información de la url de destino aparezca digamos dentro de un recuadro, por ejemplo, al pasar el cursor por encima de la imagen, sin que nos lleve a la otra página.

Ahora no recuerdo ningún site en concreto que haga este efecto, pero me parece que en algunos blogs wordpress lo he visto mucho...

Gracias de nuevo por tanto detalle.
  #4 (permalink)  
Antiguo 07/12/2009, 12:38
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años
Puntos: 50
Respuesta: onmouseover - Sobre una imagen que aparezca un href

¡Ah!, ya sé a qué te refieres. Pero realmente no sé cómo lo hacen. Se me ocurren algunas formas, pero la más complicada es mostrar "en miniatura" la página apuntada. No se me ocurre cómo redimensionarlas. Lo que se me ocurrió (por si quieres probar por ese lado) es tener un iframe oculto (usa la propiedad CSS "display" seteada en "none" para ocultarlo, en "block" para mostrarlo) que cargue la página apuntada (con el considerable ancho de banda gastado al cuhete que ello implica) cuando se pasa por encima del link, y que tenga la posición del enlace o bien la del mouse (getBoundingClientRect - aunque no funciona en todos los navegadores - para la primer opción, para la segunda puedes revisar este enlace). Creo que lo más correcto para mover de un lado a otro un elemento con precisión y que no se vaya al demonio el resto de la página es que ese elemento tenga propiedad CSS position: absolute y un z-index lo suficientemente alto para que nada lo tape; simplemente habrá que variar el top y el left. Además, debe ser hijo del nodo body, no de otro. Bueno, yo intentaría por ese lado. ¡Suerte!
  #5 (permalink)  
Antiguo 07/12/2009, 12:42
Avatar de dggluz  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años
Puntos: 50
Respuesta: onmouseover - Sobre una imagen que aparezca un href

¿Sabes? mejor ni intentes lo del iframe; creo que es muy mala idea abrir páginas ajenas que pueden tener su propio código javascript (y ejecutarlo) además de consumir mucho procesador y ancho de banda (y que encima puedan acusarte de hotlinking). Creo que la opción más tediosa pero segura es hacer miniaturas de las capturas de pantalla de cada página que habría que hacer). ¡Suerte!
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 13:18.