al pasar por una imagen activar otra

Willy · #1 (**permalink**) 09/08/2004, 11:15

Hola amigos,
Necesito que cada vez que pase el mouse (sin clickear, solo pasar por arriba) por una imagen, cambie la imagen que esta junto a esta.
Quiero esto para usarlo en un menu de mi home page, es decir que al pasar por una imagen, se active un comentario a la derecha de esa opcion, explicando para que sirve esa opcion. Explicandolo de otra forma, seria abrir una nueva imagen en la home cuando pase por arriba de determinada opcion.
Se entiende? no tengo mas formas de explicarlo ! Perdon.
Otra cosa, soy totalmente novato.
Muchas Gracias.

SiR.CARAJ0DIDA · #2 (**permalink**) 09/08/2004, 20:44

che no te entendí nada :s

KarlanKas · #3 (**permalink**) 10/08/2004, 00:58

Dime si esto te sirve!

Código HTML:

<html>
<head> 
<script>
//La imagen de explicacion debe tener como NAME explicacion + el name de lo que explica.
//La imagen de explicacion debe ser un archivo jpg con el nombre explicacion + el name de lo que explica.jpg
//Por ejemplo, en el código de abajo la imagen de explicación debe ser explicacionChorizo.jpg
//En la imagen que se explica debe estar siempre el onmouseover y el onmouseout. Es el mismo para todas
//Así que no tienes que cambiarlo.
function mostrar(esto,muestro){
nombre="explicacion"+esto.name;
destino=(muestro)?nombre+".jpg":"nada.jpg";
document.images[nombre].src=nombre+".jpg";
}


</script>
</head>
<body>
<table><tr><td>
<img name="explicacionChorizo"
src="nada.jpg">
</td>
<td>
<img name="Chorizo"
src="chorizo.jpg" 
onmouseover="mostrar(this,true)"
onmouseout="mostrar(this,false)">
</td>
</tr>
</table>
</body>

</html>

Si no lo entiendes me lo dices.

Terech · #4 (**permalink**) 10/08/2004, 01:22

Hola Willy.

Trataré de explicarte como hacerlo de una manera sencilla. Estoy en el entendido de que de una serie de botones (lo haremos con tres para que no tengas problemas), lo que deseas es que una imagen se genere en OTRO lugar (junto a los botones o en donde sea que la quieres pero siempre el mismo lugar, que llamaré Punto X) cada vez que el mouse pasa sobre cada uno de los tres botones. ¿Ok? (El ejemplo de este script que te pongo lo podrás ver en http://www.mexicarte.com.mx al abrir el botón CATALOGO)

Paso 1: Pon entre las etiquetas <head> y </head> de tu documento lo siguiente

.....................................
<script LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">

</SCRIPT>
.....................................
En realidad, si tienes TRES BOTONES tu vas a desear que aparezcan TRES IMAGENES DIFERENTES en el punto X, ¿correcto?

A la imagen 1 la llamamos flyText, a la 2 la llamamos tankText y a la 3 heliText ¿vamos bien? (por supuesto, estamos en el entendido que todas deben de tener la misma medida). Los nombres los puedes cambiar a lo que tu deseas pero siempre respetando las mayúsculas y minúsculas.

Vamos a requerir una cuarta imagen a la que llamaremos bgText. ¿Cuál es esta? La que se muestra cuando nadie pasa el mouse sobre nuestros tres botones.

Así, en el script que te puse arriba dejaras IGUAL la primera parte (la que dice = new Image) y únicamente de la segunda lista cambiarás el nombre del source (src) con el nombre real de cada una de tus fotos. Por ejemplo, flyText.src = "menuportafotos.jpg", en donde reemplazaras menuportafotos.jpg por el nombre de tu gráfico, siempre con terminación .jpg o .gif.

No cambies nada más del script. ¿Hasta ahí vamos bien?

Paso 2

A CADA UNO de tus botones le vas a poner lo siguiente (corrido, aquí se ve una linea nueva por los limites de este board, pero tú ponlo seguido):

BOTON 1
<a href="myarchivo.htm" onMouseOver="chgImg('textField1','flyText')" onMouseOut="chgImg('textField1','bgText')"><img src="portafotos.jpg" width="110" height="30" border="0"></a>

(Este comando unicamente dice que cuando pase el mouse sobre el botón uno cambie de la imagen llamada textfield1 -ahorita te platico de ella-, que es la que se encuentra en el punto X, a la imagen que asociaste a la imagen flyText).

BOTON 2
<a href="myarchivo.htm" onMouseOver="chgImg('textField1','tankText')" onMouseOut="chgImg('textField1','bgText')"><img src="portafotos.jpg" width="110" height="30" border="0"></a>

BOTON 3
<a href="myarchivo.htm" onMouseOver="chgImg('textField1','heliText')" onMouseOut="chgImg('textField1','bgText')"><img src="portafotos.jpg" width="110" height="30" border="0"></a>

Paso 3
Finalmente a la imagen que denominaste como la que se debe ver cuando nadie pase el mouse sobre cualquiera de nuestros 3 botones la vas a llamar "textfield1" de la siguiente manera:

<img src="menu0.jpg" width="480" height="275" border="0" name="textField1">
..............................................

Si tienes dudas, contáctame en estos foros.

Saludos.

Tere