/    Sign up×
Community /Pin to ProfileBookmark

Duplicate code

Copy linkTweet thisAlerts:
Jul 15.2009

I modified the code from [URL=”http://www.webmonkey.com/tutorial/Make_a_JavaScript_Slideshow”]this[/URL] tutorial for making a javascript slideshow. I changed the play slideshow function to an onMousover event, and the pause function to an onMouseout event. I managed to get this to work, but then I tried to implement the same functionality on another picture on the same page. My goal is to create a series of pictures that animate(or more accurately, slip through several pictures) when you rollover them. In order to duplicate the code I went through the code and attached 01 to all the variables. Then I duplicated the code and changed the 01 to 02.

However, I can only get the first slideshow to run. According to Firebug the second element isn’t even calling the Javascript function. I’ve checked, double checked, and triple checked for typos, so I know that isn’t it.

You can view the page at [URL=”testing.natureswheel.com”]testing.natureswheel.com[/URL]
The javascript is in an external file, which can be viewed [URL=”http://testing.natureswheel.com/animated_rollover.js”]here[/URL]

The first picture acts like its supposed to, and the second one is supposed to act like the first, but doesn’t for some reason. Even though all the pictures are the same now, on the final version of the site they will be different, so I can’t just use the same pictures on every one.

Thanks in advance for any light you can shed on this issue.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@criterion9Jul 15.2009 — I get the following in FF error console:

Error: timerID02 is not defined

Source File: http://testing.natureswheel.com//event/F%2F5gk4JPmSaVBEMMpN%2FG%2BA%3D%3D

Line: 2
[/quote]
Copy linkTweet thisAlerts:
@FaldwinauthorJul 15.2009 — @criterion9

Yeah I was aware of that error, but I can't figure out why its there. This is the element that is supposed to be working

[CODE]
<a href="clock.html" onMousover="rotateImage02('rImage02')" onMouseout="clearTimeout(timerID02)">
<img name="rImage02" src="./rollover_img/clock1.jpg" alt="Synchronicity Clock">
</a>
[/CODE]

And then this is the function that is being called:
[CODE]
function rotateImage02(place02) {
var new_image02 = getNextImage02();
document[place02].src = new_image02;
var recur_call02 = "rotateImage02('"+place02+"')";
timerID02 = setTimeout(recur_call02, interval02);
}
[/CODE]
From my point of view it looks like timerID02 is being defined. But that is only called onMouseout, which is actually being called, according to the Javascript profiler. rotateImage02 isn't even being called, for reasons that are beyong me.
Copy linkTweet thisAlerts:
@criterion9Jul 16.2009 — I just noticed you have two identical functions in your javascript: randNum. You only need one of those.

Try removing one of them and seeing if that makes a difference.
×

Success!

Help @Faldwin 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.8,
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,
)...