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>
Use
clearInterval
and track the initial interval: