/    Sign up×
Community /Pin to ProfileBookmark

JavaScript Source tutorial help

Copy linkTweet thisAlerts:
Nov 11.2006

I have tried to incorporate the Rotating Image tutorial onto my page which I found at JavaScript Source, with no luck. For some reason, the image just won’t change. I have tried many different things, including having the script called from the server as well as writing it directly into the source code, changing the image names from my custom names to those in the tutorial, etc.

Can someone in the know have a look at my page and let me know what I may be doing wrong? The page is [url]http://www.thehogsden.com[/url]

I am trying to have the image in the centre of the page rotate through 5 different news stories.

Also, if anyone has a different way to do this, I am game to try. The effect I’m trying to get it on the NHL.com homepage. Eventually I’d like to make it so that I can have each news story link to a seperate page and have controls for forward, back, stop and go.

Thanks.

Duke

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Mr_JNov 11.2006 — It could be the onload

Instead of having [B]window.onload=cycleBan[/B] try putting [B]cycleBan()[/B] with the onloads you have in the opening body tag
Copy linkTweet thisAlerts:
@duker10authorNov 11.2006 — That worked...thanks a lot.

Duke
Copy linkTweet thisAlerts:
@duker10authorNov 11.2006 — Is there any way to make each of my images clickable (attach a hyperlink to each?)
Copy linkTweet thisAlerts:
@Mr_JNov 11.2006 — Give this a try

The array is now 2 dimensional change each url to suit, if one is not required leave the quotes empty

The onclick event is dynamically added to the banner img tag.

I have not tested this but it should work ok

[code=php]<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Lee Underwood :: http://javascript.internet.com/ */

var bannerImg = new Array();
// Enter the names of the images below
bannerImg[0]=new Array("images/news_stories/image_jss.gif","url")
bannerImg[1]=new Array("images/news_stories/news_story2.gif","url")
bannerImg[2]=new Array("images/news_stories/news_story3.gif","url")
bannerImg[3]=new Array("images/news_stories/news_story4.gif","url")
bannerImg[4]=new Array("images/news_stories/news_story5.gif","")

var newBanner = 0
var totalBan = bannerImg.length

function cycleBan() {
newBanner++
if (newBanner == totalBan) {
newBanner = 0
}
document.banner.src=bannerImg[newBanner][0]

if(bannerImg[newBanner][1]!=""){
document.banner.onclick=function(){
window.location=bannerImg[newBanner][1]
}

}
else{
document.banner.onclick=null
}

// set the time below for length of image display
// i.e., "4*1000" is 4 seconds
setTimeout("cycleBan()", 5*1000)
}

//-->
</script>

[/code]
×

Success!

Help @duker10 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.29,
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,
)...