Jurge Posted February 23, 2009 Share Posted February 23, 2009 Okay first I have to apolagize because the solutions is probably very simple but I don't know my JS What i wanted to make is an image that changes every 5 seconds or so but each image has a different link. I used a code that looks like this to achieve the changing but i didn't know how to add links. Head <HEAD> <SCRIPT LANGUAGE="JavaScript"> var interval = 2.5; // delay between rotating images (in seconds) var random_display = 1; // 0 = no, 1 = yes interval *= 1000; var image_index = 0; image_list = new Array(); image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg"); image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg"); image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg"); image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg"); var number_of_image = image_list.length; function imageItem(image_location) { this.image_item = new Image(); this.image_item.src = image_location; } function get_ImageItemLocation(imageObj) { return(imageObj.image_item.src) } function generate(x, y) { var range = y - x + 1; return Math.floor(Math.random() * range) + x; } function getNextImage() { if (random_display) { image_index = generate(0, number_of_image-1); } else { image_index = (image_index+1) % number_of_image; } var new_image = get_ImageItemLocation(image_list[image_index]); return(new_image); } function rotateImage(place) { var new_image = getNextImage(); document[place].src = new_image; var recur_call = "rotateImage('"+place+"')"; setTimeout(recur_call, interval); } </script> </HEAD> [body] <BODY OnLoad="rotateImage('rImage')"> <center> <img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90> </center> Quote Link to comment Share on other sites More sharing options...
rhodesa Posted February 23, 2009 Share Posted February 23, 2009 <html> <script type="text/javascript"> var interval = 2.5; // delay between rotating images (in seconds) var images = [ { src : "http://javascript.internet.com/img/image-cycler/01.jpg", url : "http://www.google.com" }, { src : "http://javascript.internet.com/img/image-cycler/02.jpg", url : "http://www.yahoo.com" }, { src : "http://javascript.internet.com/img/image-cycler/03.jpg", url : "http://www.cnn.com" }, { src : "http://javascript.internet.com/img/image-cycler/04.jpg", url : "http://www.nbc.com" } ]; var current = -1; function rotateImage ( ) { //Get a random index that isn't the current index var rand; do{ rand = Math.floor(Math.random() * (images.length)); }while (rand == current); current = rand; //Load image and link var image = images[rand]; document.getElementById('rImage').src = image.src; document.getElementById('rImageLink').href = image.url; } function preloadImages ( ) { for(var n=0;n < images.length;n++){ images[n]['preload'] = new Image(); images[n]['preload'].src = images[n].src; } } function startRotating ( ) { rotateImage(); preloadImages(); setInterval('rotateImage();',interval * 1000); } window.onload = startRotating; </script> </head> <body> <div style="text-align: center;"> <a id="rImageLink" src=""><img id="rImage" src="" width="120" height="90"></a> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Jurge Posted February 23, 2009 Author Share Posted February 23, 2009 sweet thanks man. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.