how to make an image change multiple times onmouseover

1.1k views Asked by At

I'm trying to make an image change multiple times so i used setInterval but it doesn't stop

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
  </head>
  <body>
    <a href="https://www.google.com" target="_blank">
      <img onmouseover="setInterval(mouseOver,500)" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
    </a>
    <script>
      function mouseOver()
      {
        element=document.getElementById("a")
        if (element.src.match("pic_bulboff.jpg"))
        {
          document.getElementById("a").src="8.jpg";
        }
        else if (element.src.match("8.jpg"))
        {
          document.getElementById("a").src="6.jpg";
        }
        else
        {
          document.getElementById("a").src="1.jpg";
        }
      }
      function mouseOut()
      {
        document.getElementById("a").src="1.jpg";
      }
    </script>
  </body>
</html>

8

There are 8 answers

0
G0dsquad On BEST ANSWER

Use clearInterval and track the initial interval:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <a href="https://www.google.com" target="_blank">
    <img onmouseover="init()" onmouseout="mouseOut()" id="a" src="http://placecage.com/400/400" style="height: 45vh; width: 23vw;">
  </a>
  <script>
    var interval;

    function init() {
      interval = setInterval(mouseOver, 500)
    }

    function mouseOver() {
      element = document.getElementById("a")
      if (element.src.match("400/400")) {
        document.getElementById("a").src = "http://placecage.com/300/300";
      } else if (element.src.match("300/300")) {
        document.getElementById("a").src = "http://placecage.com/200/200";
      } else {
        document.getElementById("a").src = "http://placecage.com/500/500";
      }
    }

    function mouseOut() {
      document.getElementById("a").src = "http://placecage.com/400/400";
      clearInterval(interval)
    }
  </script>
</body>

</html>

0
Jonas Wilms On

You need to kill the Interval:

var Int;

function start(){
   Int=setInterval(yourfunc,1000);
}

function stop(){
   if(Int){
      clearInterval(Int);
      Int=null;
   }
}
0
Mosh Feu On

You should clear the interval to stop the rotation. To approach this, I propose so call an external function (Lat's call onMouseOver).

When user enter, you save the intervalId in another variable. In this way, when mouse out you can call clearInterval.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
  </head>
  <body>
    <a href="https://www.google.com" target="_blank">
      <img onmouseover="onMouseOver()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
    </a>
    <script>
      var interval;
      function onMouseOver() {
        interval = setInterval(mouseOver,500) 
      }
      function mouseOver()
      {
        element=document.getElementById("a")
        if (element.src.match("pic_bulboff.jpg"))
        {
          document.getElementById("a").src="8.jpg";
        }
        else if (element.src.match("8.jpg"))
        {
          document.getElementById("a").src="6.jpg";
        }
        else
        {
          document.getElementById("a").src="1.jpg";
        }
      }
      function mouseOut()
      {
        document.getElementById("a").src="1.jpg";
        clearInterval(interval);
      }
    </script>
  </body>
</html>

0
Jyothi Babu Araja On

You can clearInterval the setInterval() onMouseOut.

Do something like this.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <a href="https://www.google.com" target="_blank">
    <img onmouseover="mouseEntered()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
  </a>
  <script>
    var interval;

    function mouseEntered() {
      interval = setInterval(mouseOver, 500)
    }

    function mouseOver() {
      element = document.getElementById("a")
      if (element.src.match("pic_bulboff.jpg")) {
        document.getElementById("a").src = "8.jpg";
      } else if (element.src.match("8.jpg")) {
        document.getElementById("a").src = "6.jpg";
      } else {
        document.getElementById("a").src = "1.jpg";
      }
    }

    function mouseOut() {
      document.getElementById("a").src = "1.jpg";
      if(interval)
       clearInterval(interval)
    }
  </script>
</body>

</html>

0
Deep On

You need to stop the setInterval by using clearInterval. clearInterval cancel the setInterval by using the id returned by the setInterval.

Read more about clearInterval here.

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval

You can do it using.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <a href="https://www.google.com" target="_blank">
    <img onmouseover="mouseOver()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
  </a>
  <script>
    var timer;

    function change() {

      element = document.getElementById("a")
      if (element.src.match("pic_bulboff.jpg")) {
        document.getElementById("a").src = "8.jpg";
      } else if (element.src.match("8.jpg")) {
        document.getElementById("a").src = "6.jpg";
      } else {
        document.getElementById("a").src = "1.jpg";
      }

    }

    function mouseOver() {
      timer = setInterval(change, 500)
    }

    function mouseOut() {
      clearInterval(timer);
      document.getElementById("a").src = "1.jpg";
    }
  </script>
</body>

</html>

0
Nitheesh On

You have to use clearInterval function to clear the setInterval event. Here is an example.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
</head>

<body>
    <a href="https://www.google.com" target="_blank">
        <img onmouseover="setIntervalFunction()" onmouseout="mouseOut()" id="a" src="1.jpg" style="height: 45vh; width: 23vw;">
    </a>
    <script>
        var intervalVar = null;
        function setIntervalFunction() {
            intervalVar = setInterval(mouseOver,500);            
        }
        function mouseOver() {
            element = document.getElementById("a")
            if (element.src.match("pic_bulboff.jpg")) {
                document.getElementById("a").src = "8.jpg";
            } else if (element.src.match("8.jpg")) {
                document.getElementById("a").src = "6.jpg";
            } else {
                document.getElementById("a").src = "1.jpg";
            }
        }

        function mouseOut() {
            document.getElementById("a").src = "1.jpg";
            clearInterval(intervalVar);
        }
    </script>
</body>

</html>

1
Justinas On

You must use setTimeout to call function only once, because setInterval will repeat calls every n milliseconds. Also first make instant call and than call setTimeout to do it once more after some time.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <a href="https://www.google.com" target="_blank">
    <img onmouseover="mouseOver(); setTimeout(mouseOver, 500)" onmouseout="mouseOut()" id="a" src="http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png" style="height: 200px; width: 200px;">
  </a>
  <script>
    function mouseOver() {
      element = document.getElementById("a")
      if (element.src.match("http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png")) {
        document.getElementById("a").src = "http://www.drodd.com/images15/2-9.png";
      } else if (element.src.match("http://www.drodd.com/images15/2-9.png")) {
        document.getElementById("a").src = "http://pngimg.com/upload/small/number3_PNG14976.png";
      } else {
        document.getElementById("a").src = "http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png";
      }
    }

    function mouseOut() {
      document.getElementById("a").src = "http://downloadicons.net/sites/default/files/yellow-number-1-icon-24487.png";
    }
  </script>
</body>

</html>

1
Banzay On

You just can use CSSS-animation with keyframes. Look at snippet. Try to move mouse over an image

.test {
    margin: 30px;
    width: 200px;
    height: 150px;
    background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg");
}
@keyframes BG-CHANGE {
    
    0% {
     background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg");
    }
    30% {
      background: url("http://lorempixel.com/output/nature-q-c-200-150-7.jpg");
    }
    60% {
      background: url("http://lorempixel.com/output/nature-q-c-200-150-10.jpg");
    }
    100% {
     background: url("http://lorempixel.com/output/nature-q-c-200-150-1.jpg");
    }
}
.test:hover {
     animation: BG-CHANGE 6s infinite;
}
<div class="test"></div>