Foros del Web » Programando para Internet » Javascript »

Problemas con cambiar imagen al pasar el ratón

Estas en el tema de Problemas con cambiar imagen al pasar el ratón en el foro de Javascript en Foros del Web. Buenas, quiero hacer una serie de botones de dos imágenes, pasando de una a otra al pasar el ratón encima. En internet he encontrado un ...
  #1 (permalink)  
Antiguo 18/09/2009, 18:01
 
Fecha de Ingreso: septiembre-2009
Mensajes: 2
Antigüedad: 14 años, 7 meses
Puntos: 0
Problemas con cambiar imagen al pasar el ratón

Buenas, quiero hacer una serie de botones de dos imágenes, pasando de una a otra al pasar el ratón encima. En internet he encontrado un código que me funciona bien. El problema viene cuando quiero poner por ejemplo el mismo botón dos o más veces,que sólo funciona uno de ellos.
También quería saber cómo puedo hacer, a partir de este código o si acaso uno nuevo, para poner el código para las imágenes de botones distintos.Aquí está puesto el boton1 con las imágenes button65 y button67, pero cómo puedo añadir un boton2 con imágenes x e y?

Aquí está el código para un solo botón. Si añado la última línea para un segundo botón idéntico sólo funciona uno.Y si me podéis ayudar para saber qué debería hacer para la posibilidad de dos o más tipos de botones.

Gracias por la ayuda!


<script language="Javascript">
<!--

// Precarga de imágenes
if (document.images) {
var boton1_off = new Image();
boton1_off.src = "button67.jpg";
var boton1_on = new Image();
boton1_on.src = "button65.jpg";
}

// 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>

<a href = "dirección web" onMouseOver = "entra('boton1');" onMouseOut = "sale('boton1');"><img src="button67.jpg" alt="Presentación" border="0" name="boton1"></a>
  #2 (permalink)  
Antiguo 18/09/2009, 18:24
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años
Puntos: 1517
Respuesta: Problemas con cambiar imagen al pasar el ratón

De acuerdo al codigo que estas mostrando, debes cambiarle el nombre a la imagen y a la funcion entra y sale.

Nota: le quite unos if que considero no es necesario.
Código PHP:
Ver original
  1. <script language="Javascript">
  2. <!--
  3.  
  4. // Precarga de imágenes
  5. if (document.images) {
  6.     var boton1_off = new Image();
  7.     boton1_off.src = "button67.jpg";
  8.     var boton1_on = new Image();
  9.     boton1_on.src = "button65.jpg";
  10. }
  11.  
  12. // Carga de imagen cuando el ratón pasa por encima
  13. function entra(boton) {
  14.     document.images[boton].src = boton1_on.src;
  15. }
  16.  
  17. // Carga de imagen cuando el ratón abandona el área de la imagen
  18. function sale(boton) {
  19.     document.images[boton].src = boton1_off.src;
  20. }
  21.  
  22. //--> </script>
  23.  
  24. <a href = "dirección web" onMouseOver = "entra('boton1');" onMouseOut = "sale('boton1');"><img src="button67.jpg" alt="Presentación" border="0" name="boton1"></a>
  25. <a href = "dirección web" onMouseOver = "entra('boton2');" onMouseOut = "sale('boton2');"><img src="button67.jpg" alt="Presentación" border="0" name="boton2"></a>
  26. <a href = "dirección web" onMouseOver = "entra('boton3');" onMouseOut = "sale('boton3');"><img src="button67.jpg" alt="Presentación" border="0" name="boton3"></a>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 19/09/2009, 01:12
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 1 mes
Puntos: 1284
Respuesta: Problemas con cambiar imagen al pasar el ratón

Hola:

Si quieres cambiar la imagen, puedes usar los eventos de la propia imagen:

<a href="..."><img src="button67.jpg" onmouseout = "this.src = 'button67.jpg'" onmouseover = "this.src = 'button65.jpg'" alt="Presentación" border="0" /></a>

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 19/09/2009, 09:51
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 10 meses
Puntos: 361
Respuesta: Problemas con cambiar imagen al pasar el ratón

Hola:

Si el usuario tiene desactivado el javascript en su navegador el menú (con javascript) no funcionará por lo que prefiero hacer los menús solo con css, puedes hacer écharle un vistazo a las faq de css.

Saludos.

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 19:21.