how to make an image change multiple times onmouseover

Question

how to make an image change multiple times onmouseover

1.1k views Asked by Joe Zak At 03 January 2017 at 13:25

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>

Original Q&A

There are 8 answers

Jonas Wilms On 03 January 2017 at 13:30

You need to kill the Interval:

var Int;

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

function stop(){
   if(Int){
      clearInterval(Int);
      Int=null;
   }
}

Mosh Feu On 03 January 2017 at 13:30

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>

Jyothi Babu Araja On 03 January 2017 at 13:32

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>

Deep On 03 January 2017 at 13:32

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>

Nitheesh On 03 January 2017 at 13:33

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>

Justinas On 03 January 2017 at 13:34

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>

Banzay On 03 January 2017 at 13:44

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>

**G0dsquad** · Accepted Answer · 2017-01-03 13:34:55

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>

TechQA.

how to make an image change multiple times onmouseover

There are 8 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SETINTERVAL

Related Questions in ONMOUSEOVER

Popular Questions

Popular Tags

Trending Questions