Me ayudan con este codigo?

Finseneu · #1 (**permalink**) 14/10/2004, 02:54

Tengo un menu con varios enlaces, cada enlace tiene una imagen a su lado, lo que busco es al pasar el puntero sobre el enlace cambie la imagen respectiva.
Buscando encontré algo más o menos como para el caso, luego de unas modificaciones lo pude hacer andar pero solo para un enlace, imagino que lo correcto para que me funcione en todo el menu y no tener que repetir varias veces cada sentencia seria correr un bucle for, bueno esto fué lo que intenté hacer pero ni cerca de conseguirlo, yo de javascript nada de nada, si alguien es tan amable de darme una mano como para ajustar el codigo a mis necesidades le agradesco desde ya.
Un saludo

Código HTML:

<html>
<head>
<title>Cambio dinámico de imágenes</title>
<script language="Javascript">
<!--

// Precarga de imágenes
if (document.images) {
  var boton1_off = new Image();
  boton1_off.src = "images/nav.png";
  var boton1_on = new Image();
  boton1_on.src = "images/nav2.png";
}

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
  if (document.images) {
    if (boton == 'boton1') {
      document.images[boton].src = boton1_on.src;
    }
  }
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
  if (document.images) {
    if (boton == 'boton1') {
      document.images[boton].src = boton1_off.src;
    }
  }
}

//--> </script>
</head>

<body>
<p>
<img name="boton1" src="images/nav.png">
<p>
<a href ="aaa" onMouseOver = "entra('boton1');" onMouseOut = "sale('boton1');">link</a>
</body>
</html>

claray · #2 (**permalink**) 14/10/2004, 08:13

No entiendo... probe el codigo, solo cambie las imagenes y funciona bien. En realidad todo se ve bien, no entiendo cual es el problema, con que navegador estas trabajando? en IE funciona. Te da algun error? cual es el sintoma?

Saludos.

Finseneu · #3 (**permalink**) 14/10/2004, 15:51

Gracias por responder.
Funciona bien, pero solo para una imagen/enlace, si abaja del ejemplo que puse ahi quisiera poner otro enlace junto con otra imagen deberia repetir todo el proceso, por eso preguntaba como hacerlo mediante el ciclo, o estoy equivocado?

Finseneu · #4 (**permalink**) 15/10/2004, 02:48

A ver por si no se entendió, tomando como referencia el codigo anterior solo le agrego un segundo enlace con otra imagen al lado (la misma imagen que tiene el 1er link)

Código HTML:

<a href ="aaa" onMouseOver = "entra('boton1');" onMouseOut = "sale('boton1');">link2</a>

Lo que busco es que funcione de igual forma sin tener que reescribir todas las instrucciones.

Atzeneta · #5 (**permalink**) 15/10/2004, 03:11

¿Puede servirte algo así?

<html>
<head>
<title>Cambio dinámico de imágenes</title>
</head>
<body>
<script language="Javascript">

function F_Carga(Num_Img, Imagen_Activa){
document.getElementById('Img_' + Num_Img).src = Imagen_Activa
}
function F_DesCarga(Num_Img, Imagen_Inactiva){
document.getElementById('Img_' + Num_Img).src = Imagen_Inactiva
}

</script>
<img src="Ruta_Imagen 1" Id="Img_1"><a href="Enlace" onMouseOver="F_Carga(1, 'Ruta de la Imagen Activa 1')" onMouseOut="F_DesCarga(1, 'Ruta de la Imagen Inactiva 1')">Frase Enlace 1</a>
<br>
<img src="Ruta_Imagen 2" Id="Img_2"><a href="Enlace" onMouseOver="F_Carga(2, 'Ruta de la Imagen Activa 2')" onMouseOut="F_DesCarga(2, 'Ruta de la Imagen Inactiva 2')">Frase Enlace 2</a>
<br>
<img src="Ruta_Imagen 3" Id="Img_3"><a href="Enlace" onMouseOver="F_Carga(3, 'Ruta de la Imagen Activa 3')" onMouseOut="F_DesCarga(3, 'Ruta de la Imagen Inactiva 3')">Frase Enlace 3</a>
<br>
.
.
.
.
</body>
</html>

Finseneu · #6 (**permalink**) 15/10/2004, 03:45

Atzeneta, muchas gracias.
Casi que es lo que busco, digo casi porque me da un pequeño problema, al pasar el puntero la primera vez no pasa nada, al sacarlo carga la imagen "encendida" y de ahi en mas funciona bien, solo que con los valores invertidos.
Una aclaracion, las imagenes que necesito poner son siempre las mismas.
Gracias de nuevo.

Finseneu · #7 (**permalink**) 15/10/2004, 03:48

Bueno, no era muy dificil, solo inverti el orden de los paths y ya :)
Muchas gracias por la ayuda