I have a banner which is operated by javascript that changes between images for various sponsor messages that direct the user to the sponsors webpage when the user clicks on the banner. I normally only change between two sponsors and each image has a link associated with it. The whole thing works exactly as i would expect it to but i find that if you place your cursor over each sponsor image, it show the sponsors link. One small detail that bugs me is that if you place your cursor over the image of sponsor 1 and wait for sponsor 2 and then click it still uses the first sponsors link and for it to work correctly, you would need to move your cursor off the banner and onto the banner again to get the new link location for sponsor 2. Is there a work around to sort this out?
I'm not sure how your html is marked up, but I assume it is something like in the code below.
I set up 2 test target pages - page1.htm and page2.htm
In the code below, when I hover over 1 image and wait for it to change to the second image, although the target href doesn't change in the browser's status bar, the href does change in the DOM (Document Object Model) to that for the second image.
If I hover on the first image and click it, without moving off it, after it has changed to the second image, my browser does go to the href of the second image.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
var show=new Image();
var images = new Array();
var links=new Array();
var num=0;
window.onload=function() {
//get the array of images and link locations
images[0]="pic1.jpg";
links[0]='page1.htm';
images[1]="pic2.jpg";
links[1]="page2.htm";
//preload the images
for (i=0;i<=1;i++) {
show[i]=new Image();
show[i].src = images[i];
}
//load the initial pic and link
document.getElementById("banner").src=show[num].src;
document.getElementById("banlinks").href=links[num];
//start rotating images and links
setInterval("rotate()", 2300);
} //end of onload
function rotate() {
//scroll through the items and change the images and links every 2.3 seconds
num++;
if (num>1) {
num=0
}
document.getElementById("banner").src=show[num].src;
document.getElementById("banlinks").href=links[num];
} //end of rorate()
That's the way i did it originally but after going through the internet, i found a piece of javascript that did something similar. I'm not sure which browser you are using that it did this, but i always got stuck on the same link. The solution seems to be to create a <div> element rather than an image and change the image. Give the div an id such as id="banner". I then used a property called innerHTML which allows you to delete code inside the div and replace it with another.
ie everytime it cycles it generates a complete <a><img></a> with link and image for that sponsor and insert it using innerHTML which does the same thing as what i had but this changes the link in the bottom right corner in real time without having to move off the banner and back on.
I'm not sure which browser you are using that it did this,.....
The code I posted works in my IE8, FF3.6 and Opera 10.
There were a couple of logic errors in your original code which I fixed. No matter how long I leave the cursor on the banner with alternating images, the browser always went to the href for the image I eventually clicked.
Reply With Quote
Correct, but i found a reasonable solution
Originally Posted by clintonb
Bookmarks