www.webdeveloper.com
Results 1 to 6 of 6

Thread: Trying to Link Rotating Images.

  1. #1
    Join Date
    Jan 2011
    Posts
    3

    Trying to Link Rotating Images.

    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?

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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>

  3. #3
    Join Date
    Jan 2011
    Posts
    3
    Your Kung Fu is strong.

    *bows* Thank You.

  4. #4
    Join Date
    Dec 2010
    Posts
    207
    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.


    Q: I found this code...
    A: Then find its author.

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by lataylor View Post
    Your Kung Fu is strong.

    *bows* Thank You.
    you're welcome

  6. #6
    Join Date
    Jan 2011
    Posts
    3
    Quote Originally Posted by clueful View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles