Cambio de imagenes al pasar el raton...

[Mirzan]

Como puedo hacer que en una zona de la web aparezcan una serie de imágenes distintas conforme paso el ratón por distintos rótulos en gifs o textos situados en otras zonas de la pagina.

Gracias y un saludo
Mirzan
-

[TurKa]

Con este script, defines las distintas imágenes:

<script language="javascript">
<!--
imagen1=new Image()
imagen1.src="imagen01.gif"
imagen2=new Image()
imagen2.src="imagen02.gif"
imagen3=new Image()
imagen3.src="imagen03.gif"
imagen4=new Image()
imagen4.src="imagen04.gif"

//-->
</script>

Luego, defines la zona en la que quieres que aparezca la/las imagenes. Por ejemplo en una tabla en la parte superior de la página:

<table height="150">
<tr>
<td height="150" valign="top">
<img name="ejemplo" src="imagen.gif"></td>
</tr>
</table>

Luego, escribes el texto sobre el cual se pasará el mouse y aparecerá la imagen.

Si quieres que el texto además, tenga un enlace a una página:

<p><a href="enlace.htm" onMouseover="document.images['ejemplo'].src=imagen1.src">Texto 1</a></p>
<p><a href="enlace.htm" onMouseover="document.images['ejemplo'].src=imagen2.src">Texto 2</a></p>
<p><a href="enlace.htm" onMouseover="document.images['ejemplo'].src=imagen3.src">Texto 3</a></p>
<p><a href="enlace.htm" onMouseover="document.images['ejemplo'].src=imagen4.src">Texto 4</a></p>

Si quieres un texto sin enlaces:

<p onMouseover="document.images['ejemplo'].src=imagen1.src" style="cursor: hand">Texto 1</a></p>
<p onMouseover="document.images['ejemplo'].src=imagen2.src" style="cursor: hand">Texto 2</a></p>
<p onMouseover="document.images['ejemplo'].src=imagen3.src" style="cursor: hand">Texto 3</a></p>
<p onMouseover="document.images['ejemplo'].src=imagen4.src" style="cursor: hand">Texto 4</a></p>