Mi html contiene 3 imágenes, todas del mismo tamaño. Estoy tratando de escribir algo de javascript, así que la tercera imagen de la bandera de Jamaica que quiero doblar fue y muevo el mouse sobre ella. Pensé que este código que escribí funcionaría, pero no funciona.
<!DOCTYPE html> <html lang="en"> <head> <title>Task 1</title> </head> <body> <img src="usa.gif" height="200" width="250"/> <img src="mexico.gif" height="200" width="250"/> <img id = "jamaica"height="200" width="250"onMouseover = "setNewImage()" onMouseout = "returnOldImage()" src="jamaica.gif"/> <script> var myImages = [ "usa.gif", "canada.gif", "jamaica.gif", ]; function setNewImage() { document.getElementById("jamaica").src="jamaica.gif" height="400" width="500"; } function returnOldImage() { document.getElementById("jamaica").src="jamaica.gif" height="200" width="250"; } </script> </body> </html>Cualquier ayuda es siempre muy apreciada Gracias
Sería mejor usar CSS para transformar la imagen al pasar el mouse. En el fragmento de código, agregué una clase al li donde la bandera de jamaica se amplía al pasar el mouse. Si desea que alguna bandera se agrande al pasar el mouse, simplemente elimine la clase jamaica y cambie el css de ul li.jamaica a:hover img a solo ul li a:hover img .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Transform with CSS</title> <style> ul { padding: 0; margin: 50px 20px; list-style: none; } ul li { margin: 5px; display: inline-block; } ul li a { padding: 5px; display: inline-block; border: 1px solid #f2f2f2; } ul li a img { width: 125px; height: 125px; display: block; } ul li.jamaica a:hover img { transform: scale(1.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } </style> </head> <body> <ul> <li><a href="#"><img src="https://cdn.countryflags.com/thumbs/united-states-of-america/flag-square-250.png" alt="United States"></a></li> <li><a href="#"><img src="https://cdn.countryflags.com/thumbs/canada/flag-square-250.png" alt="Canada"></a></li> <li class="jamaica"><a href="#"><img src="https://cdn.countryflags.com/thumbs/jamaica/flag-square-250.png" alt="Jamaica"></a></li> </ul> </body> </html>Si tiene que usar JavaScript en lugar de CSS, haga esto:
<!DOCTYPE html> <html lang="en"> <head> <title>Task 1</title> </head> <body> <img src="https://cdn.countryflags.com/thumbs/united-states-of-america/flag-square-250.png" height="200" width="250"/> <img src="https://cdn.countryflags.com/thumbs/canada/flag-square-250.png" height="200" width="250"/> <img src="https://cdn.countryflags.com/thumbs/jamaica/flag-square-250.png" id="jamaica" height="200" width="250" onMouseover="setNewImage()" onMouseout ="returnOldImage()"/> <script> var myImages = [ "usa.gif", "canada.gif", "jamaica.gif", ]; function setNewImage() { var jamImg = document.getElementById("jamaica"); jamImg.style.height="400px"; jamImg.style.width="500px"; } function returnOldImage() { var jamImg = document.getElementById("jamaica"); jamImg.style.height="200px"; jamImg.style.width="250px"; } </script> </body>