Html - JS mouseover and mouseout function

StephenBennett
October 15, 2023
262 views
2 votes
3 Answers

I created a webpage (index.html) which links to a JS file. I have coded 3 flags in the HTML document which were adjusted to about the same size. When I hover over a flag with the mouse, another image appears showing the map of the country you are hovering.

I’m trying to get it to where whenever you hover ONE of the flag images, not only should the image switch to the map, but it should also change the h1 tag to the name of the country.

My issue is when I mouse over and mouse out, it changes all three images at the same time and i cant figure out this h1 dilemma. Here is my code below. Any advice or tips I would appreciate thank you for your time.

index.html

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="styles.css">
 <script src="scripts/flags.js" type="text/javascript"></script>
</head>
<body>
    <h1>Countries and Flags</h1>
    <img id= "img1" onmouseover="setNewImage()" onmouseout="setOldImage()
    " src ="images/usa-flag.png" width="300">
    <img id= "img2" onmouseover="setNewImage()" onmouseout="setOldImage()
    " src ="images/canada-flag.png" width="300">
    <img id= "img3" onmouseover="setNewImage()" onmouseout="setOldImage()
    " src ="images/germany-flag.png" width="300">
 </body>
 </html>

flags.js

function setNewImage()
{
  document.getElementById("img1").src ="images/USAMap.png";
  document.getElementById("img2").src ="images/CanadaMap.png";
  document.getElementById("img3").src ="images/GermanyMap.png";
}
function setOldImage()
{
  document.getElementById("img1").src ="images/usa-flag.png";
  document.getElementById("img2").src ="images/canada-flag.png";
  document.getElementById("img3").src ="images/germany-flag.png";
}

I tried messing around with document.querySelector but ended up doing more harm than good. I know i have to separate the images somehow but I’m stuck at a wall

Answers

You have to create a function for each event, like this:

index.html

  <!DOCTYPE html>
  <html>
  <head>
   <link rel="stylesheet" type="text/css" href="styles.css">
   <script src="scripts/flags.js" type="text/javascript"></script>
  </head>
  <body>
        <h1>Countries and Flags</h1>
    <img id= "img1" onmouseover="setNewImage1()" onmouseout="setOldImage1()
      " src ="images/usa-flag.png" width="300">
    <img id= "img2" onmouseover="setNewImage2()" onmouseout="setOldImage2()
      " src ="images/canada-flag.png" width="300">
    <img id= "img3" onmouseover="setNewImage3()" onmouseout="setOldImage3()
      " src ="images/germany-flag.png" width="300">
       </body>
     </html>

flags.js

        function setNewImage1()
        {
          document.getElementById("img1").src ="images/USAMap.png";
         }    
        function setNewImage2()
        {
          document.getElementById("img2").src ="images/CanadaMap.png";
         }
        function setNewImage3()
        {
        document.getElementById("img3").src ="images/GermanyMap.png";
        }
        function setOldImage1()
        {    document.getElementById("img1").src ="images/usa-flag.png";  
        }
       
        function setOldImage2()  {
        document.getElementById("img2").src ="images/canada-flag.png";
          }
        function setOldImage3()
         {
         document.getElementById("img3").src ="images/germany-flag.png";
        }

Add this to listeners in
index.html

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts/flags.js" type="text/javascript"></script>
</head>

<body>
    <h1>Countries and Flags</h1>
    <img id="img1" onmouseover="setNewImage(this)" onmouseout="setOldImage(this)
    " src="images/usa-flag.png" width="300">
    <img id="img2" onmouseover="setNewImage(this)" onmouseout="setOldImage(this)
    " src="images/canada-flag.png" width="300">
    <img id="img3" onmouseover="setNewImage(this)" onmouseout="setOldImage(this)
    " src="images/germany-flag.png" width="300">
</body>

</html>

and use associative array in flags.js

let flags = {
            'usa-flag.png': 'USAMap.png',
            'canada-flag.png': 'CanadaMap.png',
            'germany-flag.png': 'GermanyMap.png',
        }

        function setNewImage(img) {
            let src = img.getAttribute('src')
            let flag = src.split('/').pop()
            let url = src.substring(0, src.indexOf(flag))
            img.src = url + flags[flag] // new image url
            document.querySelector('h1').innerText = flag.substring(0, flag.indexOf("-flag.png"))
            document.querySelector('h1').style = 'text-transform: capitalize;' 
        }
        function setOldImage(img) {
            let src = img.getAttribute('src')
            let flag = src.split('/').pop()
            let url = src.substring(0, src.indexOf(flag))
            img.src = url + Object.keys(flags).find(key => flags[key] === flag) // old image url
            document.querySelector('h1').innerText = 'Countries and Flags'
        }

this way you can add/remove flags as much as you like

To amend the previous answer, this will allow you to add more countries without having to change your JS.

You can store the data within the HTML img element.
Using the data attribute add the name and links to the map image and flag image.

Then using JS you initially loop through the img class to load the initial flag image (this is done via a window event listener to check for the page loading).
Then you loop through all the img class elements to add a mouseover and mouseout event, of which each set the img.src property to either the data-flag or the data-map attribute.
Additionally, change the innerHTML of the h1 to the value of the data-name attribute

window.addEventListener("load", () => {
  document.querySelectorAll(".img").forEach(img => {
    img.src = img.dataset.flag
  })
})

document.querySelectorAll(".img").forEach(img => {
  img.addEventListener("mouseover", () => {
    img.src = img.dataset.map
    document.querySelector("#title").innerHTML = img.dataset.name
  })
})

document.querySelectorAll(".img").forEach(img => {
  img.addEventListener("mouseout", () => {
    img.src = img.dataset.flag
    document.querySelector("#title").innerHTML = "Countries and Flags"
  })
})

img {
  height: 75px;
  aspect-ratio: auto;
  display: block;
}

<h1 id="title">Countries and Flags</h1>
<img id="img1" class="img"
     data-name="USA"
     data-flag="https://cdn.britannica.com/33/4833-004-828A9A84/Flag-United-States-of-America.jpg" 
     data-map="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Map_of_USA_with_state_and_territory_names_2.png/800px-Map_of_USA_with_state_and_territory_names_2.png"
     >
<img id="img2" class="img" 
     data-name="Canada"
     data-flag="https://upload.wikimedia.org/wikipedia/en/thumb/c/cf/Flag_of_Canada.svg/1280px-Flag_of_Canada.svg.png" 
     data-map="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Political_map_of_Canada.png/620px-Political_map_of_Canada.png"
     >
<img id="img3" class="img"
     data-name="Germany"
     data-flag="https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png" 
     data-map="https://i.natgeofe.com/k/21fc53e2-5311-4eea-b805-35b5d085c2f0/Germany-Country-Map-UPDT_3x2.jpg"
     >

Please signup or login to give your own answer.

Click here to cancel reply.

Html – JS mouseover and mouseout function

Answers