/    Sign up×
Community /Pin to ProfileBookmark

Changing multiple images on the same page

Copy linkTweet thisAlerts:
Mar 07.2014

I am using this script to loop through images on mouseover. How do I make this work for multiple pictures on the same page?

<script>
var myImages = [1, 2, 3]
var img_index = 0;
var timer;
var imgId = “myImg”;

// Start animation
function animate() {
me = document.getElementById(imgId);

me.src = “Pictures/” + “test” + myImages[img_index] + “.png”

img_index++;

if (img_index == myImages.length){
img_index = 0;
}
timer = setTimeout(animate, 500);

}

function stopAnimation() {
clearTimeout(timer);
me.src=”Pictures/test1.png”
}
</script>

<img class= “format” id=”myImg” onmouseover=”imgId = this.id; timer = setTimeout(animate, 1000);” onmouseout=”stopAnimation();” src=”Pictures/test1.png” />

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 07.2014 — Clarification please...

Do you want to loop through 3 different images when the mouse is held over 1 image?

or

Do you want to loop through 3 different images when the mouse is held over any one of the images?

or

Do you want several images that loop through 3 different pictures when mouse is held over any one of the several images?

Can you show a small example of the HTML layout of the placement of the images on a page

and describe what is to happen when the mouse is lands on any particular element?

Unclear to me what the final output is to look like.

BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces)

to make it easier to read, copy and test your program. It also retains your formatting.

Also, if the CSS is important, include that as well.
Copy linkTweet thisAlerts:
@vwphillipsMar 07.2014 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Animate(i,a,ms){
if (a){
var p=i.src.slice(0,i.src.lastIndexOf('/')+1),t=i.src.slice(i.src.lastIndexOf('.'));
i.n=i.n||0;
i.n=++i.n%a.length;
i.s=i.s||i.src;
i.src=p+a[i.n]+t;
i.to=setTimeout(function(){ Animate(i,a,ms); },ms||1000);
}
else {
clearTimeout(i.to);
i.n=0;
i.src=i.s;
}
}
/*]]>*/
</script></head>

<body>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="image" onmouseover="Animate(this,['1','2','3','4'],1000);" onmouseout="Animate(this);" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" onmouseover="Animate(this,['Egypt6','Egypt7','Egypt8','Egypt9'],2000);" onmouseout="Animate(this);" />
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@PornSINsationauthorMar 08.2014 — Thank you! This work just the way I want it to. If I wanted to start the animation when the page loads, can I do that with this code?
Copy linkTweet thisAlerts:
@JMRKERMar 08.2014 — I'm amazed 'Vic'!

How did you figure out that's what the OP wanted from the original post?

Amazing!
Copy linkTweet thisAlerts:
@vwphillipsMar 08.2014 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Animate(i,a,ms){
if (i&&a&&a instanceof Array){
var p=i.src.slice(0,i.src.lastIndexOf('/')+1),t=i.src.slice(i.src.lastIndexOf('.'));
i.n=i.n||0;
i.n=++i.n%a.length;
i.s=i.s||i.src;
i.src=p+a[i.n]+t;
i.to=setTimeout(function(){ Animate(i,a,ms); },ms||1000);
}
else if (i&&i.src){
clearTimeout(i.to);
i.n=0;
i.src=i.s;
}
}
/*]]>*/
</script></head>

<body>
<img id="i1" src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="image" onmouseover="Animate(this,['1','2','3','4'],1000);" onmouseout="Animate(this);" />
<img id="i2" src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" onmouseover="Animate(this,['Egypt6','Egypt7','Egypt8','Egypt9'],2000);" onmouseout="Animate(this);" />


<!-- at the bootom of the page -->
<script type="text/javascript">
/*<![CDATA[*/

Animate(document.getElementById('i1'),['1','2','3','4'],1000);
Animate(document.getElementById('i2'),['Egypt6','Egypt7','Egypt8','Egypt9'],2000);
/*]]>*/
</script>


</body>
</html>[/CODE]
×

Success!

Help @PornSINsation spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...