No me funciona el efecto de Cambiar Imagen al pasar Mouse por encima
El motivo de la presente consulta es que estoy desarrollando un pequeño sitio web, y allí quiero implementar el efecto de que al pasar el mouse encima de una imagen, esta cambie de aspecto agrandándose más. Estoy usando un editor de contenido que me da la opción de usar código HTML y, lo que estoy haciendo es usar el evento 'OnMouseOver' así:
<p> <img onmouseover="this.src=http://www.amawebs.com/storage/photos/imagen_grande.jpg" onmouseout="this.src=http://www.amawebs.com/storage/photos/imagen_pequena.jpg" src="http://www.amawebs.com/storage/photos/imagen_pequena.jpg" /></p>
Pero no me funciona - al pasar el mouse por encima de la imagen, esta no es remplazada por la imagen mas grande. Ya lo he probado en el explorador Google, también en Internet Explorer.
¿Por qué podría estar ocurriendo esto? ¿Existirá alguna otra forma de lograr este efecto usando otro evento distinto o usando aluna otra codificación distinta de eventos?
Pd: probé este otro código que encontré en un tutorial en internet:
<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Este es un texto que cambia de color. Pruébalo!</p>
Pero tampoco funciona.
1 respuesta
Hola. Ya verifiqué que la imagen se encuentra cargada en el servidor. También ya hice el cambio que me indicaste de que encierre entre comillas simples el nombre del archivo de la imagen incluyendo su ruta - el código me resultó así:
<p>
<img onmouseout="this.src='http://www.amawebs.com/storage/photos/g20dm44ccczs.jpg'" onmouseover="this.src='
'" src="http://www.amawebs.com/storage/photos/g20dm44ccczs.jpg" /></p>
<p>
Pero aún así no me funciona - cuando paso el puntero del mouse por encima de la imagen (g20dm44ccczs.jpg), esta no cambia a la otra que es g20dm44ccczb.jpg'.
Gracias y quedo pendiente haber qué me podrías decir sobre lo que podría estar sucediendo y qué podría hacerse para solucionarlo.
Este código tuyo esta perfectamente y funciona perfectamente. Lo he probado, incluso con las imágenes que pones y no tiene ningún problema.
Es posible que este servidor que usas (amawebs) no admita código javascript en sus paginas, o no te deje editar las etiquetas img. Deberías consultarlo con ellos.
Para probar, usa el código que te adjunto, y guardalo con extensión html en tu disco local. Ábrelo luego con cualquier navegador (espero no uses Internet Explorer 7 o inferior) y comprobarás que sí funciona.
Venga, ánimos que tu puedes.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Documento de prueba</title> </head> <body> <p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Este es un texto que cambia de color. Pruébalo!</p> <p> <img onmouseout="this.src='http://www.amawebs.com/storage/photos/g20dm44ccczs.jpg'" onmouseover="this.src=''" src="http://www.amawebs.com/storage/photos/g20dm44ccczs.jpg" /></p> <p> </body> </html>
Muchas Gracias. Ya lo probé en el archivo HTML que me sugeriste usar para verificarlo - y si Sí funciona. Intentaré comunicarme con Soporte Técnico del sitio www.amawebs.com haber qué me dice del porqué este código con OnMouseOver no funciona allá. Gracias
