Trying to Link Rotating Images.

**lataylor** · 01-31-2011, 04:22 PM

Hello Everyone!

This is probably an old subject, as I can find a lot of pages over the web dealing with the matter, but none have a solution that seems to work for me. Sooo I'm here hoping for a cure to my problem.

I'm trying to get a rotating image to house a link that visitors can click on.

Here's code I slapped together:

Code:

<script language="javascript" type="text/javascript">

var imgArray = new Array();
  // Enter the names of the images below
  imgArray[0]="http://www.555.com/file1.JPG";
  imgArray[1]="http://www.555.com/file2.JPG";
  imgArray[2]="http://www.555.com/file3.JPG";
  
  
// Set up URL array
var URL = new Array();
	URL[0] = "http://www.111.com"; 
	URL[1] = "http://www.222.com"; 
	URL[2] = "http://www.333.com"; 

   
   
var newImage = 0 ;
var totalImg = (imgArray.length - 1);
var currentURL = (URL.length - 1);

function cycleImg() {
  if (newImage == totalImg) {
    newImage = 0 ;
  } else {
			document.image.src = imgArray[newImage];
			document.image.URL = URL[a] ;
			// set the time below for length of image display
			// i.e., "4*1000" is 4 seconds
			setTimeout("cycleImg()", 3*1000);
			
			newImage++;
			} 

}

</script>

<!-- HTML -->
<body onload="cycleImg();">
<div id="rotator_div">
<p style="text-align:center;"> <strong>Current Sponsors:</strong></p>
<img id="rotating_img" src="http://www.555.com/file1.JPG" name="image"/>
</div>
</body>

Now it only loads the first image, and disappears; plus the image that does load, doesn't have the URL attached to it in a link.

Could anyone please help with the adjustments that I need to make to pull this off?

**tirna** · 02-01-2011, 02:54 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
        var picData = [
          ['num1.jpg','url1'],
          ['num2.jpg','url2'],
          ['num3.jpg','url3']
        ];
        //preload the images
        var picO = new Array();
        for(i=0; i < picData.length; i++){
            picO[i] = new Image();
            picO[i].src = picData[i][0];
        }
        var currPic = -1;
        function swapImage(){
            currPic = (++currPic > picO.length-1)? 0 : currPic;
            imgRotO.src = picO[currPic].src;
            imgRotO.onclick=setUrl;
            setTimeout(swapImage,3000);
            
        }
        function setUrl(){
            window.location.href = picData[currPic][1];
        }
        window.onload=function(){
            imgRotO = document.getElementById('imgRot');
            swapImage();
        }
        </script>
    </head>
    <body>
        <div id="container">
            <img id="imgRot" src="" alt="" />
        </div>
    </body>
</html>

**lataylor** · 02-01-2011, 06:56 PM

Your Kung Fu is strong.

*bows* Thank You.

**clueful** · 02-01-2011, 07:16 PM

It's easy to show an alternate solution ( of which there are countless ), but the original problem was an undefined variable. All you had to do was use the error console.

**tirna** · 02-02-2011, 02:02 AM

Originally Posted by lataylor

Your Kung Fu is strong.

*bows* Thank You.

you're welcome

**lataylor** · 02-02-2011, 02:09 PM

Originally Posted by clueful

It's easy to show an alternate solution ( of which there are countless ), but the original problem was an undefined variable. All you had to do was use the error console.

Hmm. I don't know what an error console is, but I would be glad to learn if you point me in the right direction. In terms of javascript training I have none, and I'm programming the stuff on a content management system, so I'm not sure if I have any access to developer-type platforms.

Thread: Trying to Link Rotating Images.

Thread Tools

Display

Trying to Link Rotating Images.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions