Solved

Random Images with hyperlink to the actual corresponding product page.

Posted on 2008-10-20
5
609 Views
Last Modified: 2009-07-15
Hello. What I am wanting to do is have random images rotate on my index page. I'm wanting these images to be hyperlinks to the corresponding products page. I've tried 2 different way of doing it. The first is easier for me to understand (not 100% but closer). The second I don't understand as much because the function is different. The code is like this (I added the link array at top for reffernce on the 2nd script below) but how do I change the function at the bottom to have the corresponding links with the images matched up together?

Thanks for your help!!

I have this which isn't rotating pictures but the link works:
 

function random_imglink(){

var myimages=new Array()

//specify random images below. You can have as many as you wish

myimages[1]="../new/images/cc/random_images/4719lr.jpg"

myimages[2]="../new/images/cc/random_images/6754lr.jpg"

myimages[3]="../new/images/cc/random_images/71HHGlr.jpg"
 

//specify corresponding links below

var imagelinks=new Array()

imagelinks[1]="http://www.link1.com"

imagelinks[2]="http://www.link2.com"

imagelinks[3]="http://www.link3.com"
 

var ry=Math.floor(Math.random()*myimages.length)

if (ry==0)

ry=1

document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')

}

//-->

</script>
 

##############################

Second try below

##############################
 

Or I have this which rotates images but I'm not sure how to add the link var to the function at bottom:
 

<script language="JavaScript">

<!-- Begin
 

var imagelinks=new Array()

imagelinks[1]="http://www.link1.com"

imagelinks[2]="http://www.link2.com"

imagelinks[3]="http://www.link3.com"
 

var interval = 2.5; // delay between rotating images (in seconds)

var random_display = 1; // 0 = no, 1 = yes

interval *= 1500;
 

var image_index = 0;

image_list = new Array();

image_list[image_index++] = new imageItem("../new/images/cc/random_images/4719lr.jpg");

image_list[image_index++] = new imageItem("../new/images/cc/random_images/6754lr.jpg");

image_list[image_index++] = new imageItem("../new/images/cc/random_images/71HHGlr.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);

}

//  End -->

</script>

Open in new window

0
Comment
Question by:Guest85
  • 4
5 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22763902
Simply use this construction --

<A href="http://www.link1.com"><IMG src="new/images/cc/random_images/4719lr.jpg"></A>

with the link encasing the image, you cannot get dis-synchronized, and the image clicked makes the link.
0
 
LVL 1

Author Comment

by:Guest85
ID: 22763969
I don't think that will work with JavaScript and random images cycling from one to another?
0
 
LVL 1

Author Comment

by:Guest85
ID: 22769787
Let me elaborate a little.

The first example displays a random picture with the correct link associated with the picture. The only problem is the script doesn't automatically reload another random image without a refresh. If you hit refresh and reload the page you will get a different random image with a link.

The second example randomly changes the images on the page every 6 seconds or so. The only thing about this one is I'm not sure how to associate this function with the links and make it work. I've tried a few things but can't get it to work.

What I'm wanting is a combination of the two. I want a random picture with its corresponding link when clicked. If this image isn't clicked I want it to change or cycle from one of the random linked pictures to another.

Hope this clarified things a little. Let me know if you don't understand.
0
 
LVL 1

Accepted Solution

by:
Guest85 earned 0 total points
ID: 22779808
Got the links working other than the images are no longer random. They appear in a ordered list/sequence one after another. Any help on implementing the images to a random sequence

   <script type="text/javascript">

     rotating_images = new Array();
 

	  rotating_images.push(new RotatingImage('../new/images/cc/random_images/pic1.jpg','http://www.link1.com'));

      rotating_images.push(new RotatingImage('../new/images/cc/random_images/pic2.jpg','http://www.link2.com'));

      rotating_images.push(new RotatingImage('../new/images/cc/random_images/pic3.jpg','http://www.link3.com'));
 

      var active_image_delay = 3; //in seconds
 

      var active_image_index = 0;
 

      function rotateImages() {
 

        if (!document.getElementById('my_images') || rotating_images.length < 1) return;

        var new_image_code = '';
 

        new_image = document.createElement('IMG');

        new_image.src = rotating_images[active_image_index].image;

        new_image.border = "0";
 

        new_link = document.createElement('A');

        new_link.href = rotating_images[active_image_index].url;
 

        new_link.appendChild(new_image);
 

        if (document.getElementById('my_images').hasChildNodes() ) {

          while (document.getElementById('my_images').childNodes.length >= 1 ) {

            document.getElementById('my_images').removeChild(document.getElementById('my_images').firstChild );

          }

        }
 

        document.getElementById('my_images').appendChild(new_link);
 

        active_image_index = (active_image_index+1)%rotating_images.length;
 

        setTimeout('rotateImages();',active_image_delay*1000);

      }      

	  function RotatingImage (image_url, url) {

        this.image = image_url;

        this.url = url;

      }

	</script>

---------------------

<body onLoad="rotateImages();">

<div id="my_images" align="center"></div>

Open in new window

0
 
LVL 1

Author Comment

by:Guest85
ID: 22864498
I figured it out using the above code. Please accept as my own solution and refund points or w/e.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now