I am trying to use javascript to double the size of one image-CodePudding

My html do contains 3 images all the same size. I am trying to write some javascript so the third image the Jamaican flag I want to double went I move the mouse over it. I thought this code I wrote would work but it does not

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

Any help is always greatly appreciated Thanks

CodePudding user response：

It would be better to use CSS to transform the image on hover. In the code snippet I've added a class to the li where the jamaica flag is enlarged on hover. If you want any flag to enlarge on hover, just remove the jamaica class, and change the css from ul li.jamaica a:hover img to just 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>

If you have to use JavaScript instead of CSS do this:

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