/    Sign up×
Community /Pin to ProfileBookmark

onclick banner change

Copy linkTweet thisAlerts:
Sep 15.2008

Let me start by saying that I have no javascript experience, but what I want to get done is simple. I’d love to learn javascript but this project I have needs to be done this week, after that I’m free to learn ?

So here’s what I’m trying to do:

I have 3 pictures that serve as navigation at the bottom of my page and a banner like graphic at the top. When you click a picture I want the banner at the top of the page to change, and the link to change with it. Each bottom pic has a different top pic, and each top pic has a different link.

Here’s a pic that will explain it better then I just did.
[URL=”http://img.photobucket.com/albums/v608/Fraggod/Picture9.jpg”]
http://img.photobucket.com/albums/v608/Fraggod/Picture9.jpg[/URL]

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Un4rmedauthorSep 15.2008 — I've been messing around with this script that rotates the banner automatically. Is there a way to take what I have here an convert it to images to change the banner instead of it automatically doing it?

if (document.images)

{

adImages = new Array("images/gamerbanner.jpg",

"images/studentbanner.jpg",


"images/everydaybanner.jpg");


adURLs = new Array("gamer.html",
"student.html",
"everyday.html");
thisAd = 0;
}


function cycleAds()

{

if (document.images)

{

if (document.adBanner.complete)

{

if (++thisAd == adImages.length)

thisAd = 0;

document.adBanner.src = adImages[thisAd];
}
}

// change to next banner every 15 seconds
setTimeout("cycleAds()", 6000);
}




function gotoAd()

{

document.location.href = "http://" + adURLs[thisAd];

}[/QUOTE]

[B]body onload="cycleAds()">[/B]

<!--Begin Container -->

<div id="container">

<div id="header" style="border-width:thin; border-style:solid">

</div>

<!-- Begin Main -->

<div id="main" style="border-width:thin; border-style:solid; border-bottom:none">

<div id="banner">

[B]<a href="javascript:gotoAd()">

<img name="adBanner" src="images/studentbanner.jpg" border="0"></a>[/B]

</body>

</div>[/QUOTE]
Copy linkTweet thisAlerts:
@GorillaMonkeyJun 11.2009 — I already created three different picture to change in three different time in a day. I did create the banner code for myself but it isn't work, maybe some those will help you. So what I did with my script and code. Here's is:

Put this in javascript: [B]timePictureChange.js[/B]

[COLOR="Red"]function pixTimeChange() {

var t=new Date();

var h = t.getHours();

var r1="images/pic1.JPG";

var r2="images/pic2.JPG";

var r3="images/pic3.JPG";

var el=document.getElementById('myimage');



// See the time below. Note: The time is in 24 hour format.

// In the example here, "5" = 5 AM; "11" =11AM.

el.src = (h>=5 && h<11) ? r1 : r2;

* el.src = (h>= 11 && h<17) ? r2 : r3;

* el.src = (h>=17*|| h<5) ? r3 : r1;

}



function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}



addLoadEvent(function() {

pixTimeChange();

});[/COLOR]


then put this in the head section:

[COLOR="red"]<script type="text/javascript" src="timePictureChange.js"></script>[/COLOR]

Then put in the body section:

[COLOR="red"]<img src="" id="myimage" alt="time of day">[/COLOR]
×

Success!

Help @Un4rmed 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.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...