CODEWITHSUNDEEP
javascripthtmlhoveronmouseoveronmouseout
Ab1
Ab1

Reputation: 1

Issues with onmouseout

I'm still learning about Javascript, and I keep running into this issue, but I am not sure why. I'm trying to make an image smaller when the user runs their mouse over it, then larger or back to the original when they mouse out of it. The image becomes smaller, but I can't seem to make it return to its original size for some reason.

This is the webpage: https://cis337-0014.cisdprogram.com/mod10/mod10.html

I've only tried a couple solutions, but I don't really know where to go from here. I have other images that change correctly that I don't show in the examples below to be concise (but I tacked one on at the end), so I don't understand why this is the only one that doesn't work:

Attempt 1

<!DOCTYPE html>

<html lang='en'>

    <head>
      <script>
        function displaySImage(imageFile){
          var smallerImage = document.getElementById("mainImage");
          var newNode = document.createElement("img");
          newNode.id = "mainImage";
          newNode.src = imageFile;
          newNode.alt = "Small Image";
          newNode.className = "mainImage";
          newNode.style.width = "300px";
          newNode.style.height = "200px";
          smallerImage.parentNode.replaceChild(newNode, smallerImage);

        }
        function displayLImage(imageFile){
          var largerImage = document.getElementById("mainImageL");
          var newNode = document.createElement("img");
          newNode.id = "mainImageL";
          newNode.src = imageFile;
          newNode.alt = "Large Image";
          newNode.className = "mainImageL";
          newNode.style.width = "500px";
          newNode.style.height = "400px";
          largerImage.parentNode.replaceChild(newNode, largerImage);

        }

      <link rel='stylesheet' type='text/css' href='body1.css' />

    </head>

    <body>
      <div>
        Hover over the lightbulb to make it smaller!

        <a href=#
           onmouseover="displaySImage(light.src='lightOn.jpg')" id="mainImage"
           onmouseout="displayLImage(light.src='lightOn.jpg')" id="mainImageL"
        >
        <img border = 0 name = "light" src = "lightOn.jpg" width="500px">
        </a>
      </div>
    </body>
<html>

Attempt 2

<!DOCTYPE html>

<html lang='en'>

    <head>
      <script>
        function displaySImage(imageFile){
          var smallerImage = document.getElementById("mainImage");
          var newNode = document.createElement("img");
          newNode.id = "mainImage";
          newNode.src = imageFile;
          newNode.alt = "Small Image";
          newNode.className = "mainImage";
          newNode.style.width = "300px";
          newNode.style.height = "200px";
          smallerImage.parentNode.replaceChild(newNode, smallerImage);

        }
        

      <link rel='stylesheet' type='text/css' href='body1.css' />

    </head>

    <body>
      <div>
        Hover over the lightbulb to make it smaller!

        <a href=#
           onmouseover="displaySImage(light.src='lightOn.jpg')" id="mainImage"
           onmouseout="light.src='lightOn.jpg';"
        >
        <img border = 0 name = "light" src = "lightOn.jpg" width="500px">
        </a>
      </div>
    </body>
<html>

Attempt 3 (blindly trying anything at this point)

<!DOCTYPE html>

<html lang='en'>

    <head>
      <script>
        function displaySImage(imageFile){
          var smallerImage = document.getElementById("mainImage");
          var newNode = document.createElement("img");
          newNode.id = "mainImage";
          newNode.src = imageFile;
          newNode.alt = "Small Image";
          newNode.className = "mainImage";
          newNode.style.width = "300px";
          newNode.style.height = "200px";
          smallerImage.parentNode.replaceChild(newNode, smallerImage);

        }
        

      <link rel='stylesheet' type='text/css' href='body1.css' />

    </head>

    <body>
      <div onmouseover="displaySImage(light.src='lightOn.jpg')" id="mainImage"
      onmouseout="light.src='lightOn.jpg';">

        Hover over the lightbulb to make it smaller!

        <span>
        <img border = 0 name = "light" src = "lightOn.jpg" width="500px">
        </span>
      </div>
    </body>
<html>

One that works in the same file: ...

<!DOCTYPE html>

<html lang='en'>

    <head>
     
      <link rel='stylesheet' type='text/css' href='body1.css' />

    </head>

    <body>
      <div>
        Hover over the picture to see the wood change!

        <a href=#
           onmouseover="wood.src='woodHeart.jpg';"
           onmouseout= "wood.src='wood.jpg';"
        >
          <img border = 0 name = "wood" src = "wood.jpg" width="500px">
        </a>
      </div>
    </body>
<html>

Upvotes: 0

Views: 44

Answers (1)

Keyboard Corporation
Keyboard Corporation

Reputation: 2785

Your Attempt 1 is almost correct but since you are creating newElement this onmouseover and onmouseout is not functioning well. Attempt 2 is same as your first attempt, you are creating a newElement that this 'img' have no control of your image src and function.

If you are not required of creating a newElement you can include this in your attempt.

function smallImg(img) {
   img.style.width = "300px";
   img.style.height = "200px";
}

function bigImg(img) {
   img.style.width = "500px";
   img.style.height = "400px";
}
<div>
   Hover over the lightbulb to make it smaller!
   <br>
   <a href=#>
      <img 
         onmouseover="smallImg(this)"
         onmouseout="bigImg(this)"
         id="mainImage"
         name="light"
         width="500px"
         src="https://cis337-0014.cisdprogram.com/mod10/lightOn.jpg">
   </a>
</div>

Upvotes: 0

Related Questions