Mostrar una imagen al pasar el mouse sobre otra imagen

carlitosdan · #1 (**permalink**) 15/04/2005, 20:14

Hola a todos, necesito hacer que en la pantalla me aparezca una imagen al pasar el mouse sobre otra imagen que esta en otra ubicacion de la pantalla, al sacar el mouse la imagen desaparece... es posible esto??

Gracias por su ayuda.

SEPALAUR · #2 (**permalink**) 15/04/2005, 20:58

Saludos, se cómo hacer eso en FireWorks, a continuación te explico cómo hacerlo:

Lo primero es crear un área activa con la herramienta Slice. Se selecciona todo lo que será el área activa, es decir toda el área el en cual aparecerán elementos al pasar sobre otros.
Una vez hecho esto se abre la ventana Frames (window / Frames) y se oprime el botón + tantas veces como quieras colocar distintos elementos (por ejemplo si tienes 3 imagenes y cada una hará que aparezca algo distinto al pasar sobre ella se debe oprimir 3 veces de modo que queden 4 frames en total (el primero es la página normal). Ir al frame 2 y colocar sobre el área activa lo que aparecerá al pasar sobre el elemento (puede ser una imagen, texto, lo que sea). Se hace lo mismo en los otros frames para lo que aparecerá al pasar sobre los otros elementos.
Ir al frame 1 y seleccionar el elemento que hará que aparezca lo que está en el frame 2 al pasar sobre él. Window / Behaviors / + / si no es un botón habrá que seleccionar Hotspot o Slice / swap image / seleccionar en la ventanita que muestra las zonas activas, la que corresponde a la zona activa donde está lo que aparece / elegir el frame 2 / ok. Para los otros elementos, seleccionarlos y seguir el mismo procedimiento, pero eligiendo el frame 3, 4 y así sucesivamente según corresponda. Para comprobar si funciona bien, hacer clic en preview.

Hecho esto debes exportar la plantilla fireworks e insertarla en tu página, si tienes dudas sobre como hacer eso, solo escribe preguntando como se hace.

Espero que la información te haya sido de ayuda.
Sebastián.

JavierB · #3 (**permalink**) 16/04/2005, 03:05

Hola carlitosdan

Prueba este ejemplo:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function imagen(ver) {

  document.getElementById('im').style.visibility = ver;

}

</script>

</head>

<body>

<img src="imagen1.jpg" onmouseover="imagen('visible')" onmouseout="imagen('hidden')" />

<img src="imagen2.jpg" id="im" style="visibility:hidden" />

</body>

</html>

Saludos,