SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cycling through images with links

    Hi javascript masters,

    I'm trying to get a piece of code to work so that images rotate and keep their associate hyperlinks.

    Code:
    var bannerHref = new Array();
    // Enter the links below
    bannerHref[0] = "Details.cfm?ProdID=310&category=7";
    bannerHref[1] = "Details.cfm?ProdID=311&category=7";
    bannerHref[2] = "Details.cfm?ProdID=309&category=7";
    bannerHref[3] = "Details.cfm?ProdID=312&category=25";
    bannerHref[4] = "Details.cfm?ProdID=313&category=1";
    bannerHref[5] = "Details.cfm?ProdID=317&category=7";
    bannerHref[6] = "Details.cfm?ProdID=139&category=12";
    bannerHref[7] = "Details.cfm?ProdID=349&category=22";
    bannerHref[8] = "Details.cfm?ProdID=350&category=1";
    var bannerImg = new Array();
    // Enter the names of the images below
    bannerImg[0]="images/packs/pack1.jpg";
    bannerImg[1]="images/packs/pack2.jpg";
    bannerImg[2]="images/packs/pack3.jpg";
    bannerImg[3]="images/packs/pack4.jpg";
    bannerImg[4]="images/packs/pack5.jpg";
    bannerImg[5]="images/packs/pack6.jpg";
    bannerImg[6]="images/packs/pack7.jpg";
    bannerImg[7]="images/packs/pack8.jpg";
    bannerImg[8]="images/packs/pack9.jpg";
    
    var newBanner = 0;
    var totalBan = bannerImg.length;
    function cycleBan() 
    {
    	newBanner++;
    	if (newBanner == totalBan) 
    	{
    		newBanner = 0;
    	}
    	document.banner.src=bannerImg[newBanner];
    	document.bannerlink.src=bannerHref[newBanner];
    	// set the time below for length of image display
    	// i.e., "4*1000" is 4 seconds
    	setTimeout("cycleBan()", 8*1000);
    }
    window.onload=cycleBan;
    HTML:
    Code:
    <a href="Details.cfm?ProdID=310&category=7" name="bannerlink">
    <img src="images/packs/pack1.jpg" name="banner">
    </a>
    I get an error: document.bannerlink has no properties.

    When I take the line: document.bannerlink.src=bannerHref[newBanner];
    out of the code, my images cycle through just fine with no errors being reported.

    Could I get some guidance in fixing this?
    Thanks!
    No, I REALLY dislike having to use Joomla.

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,751
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think name is valid in those element contexts. You might want to try using id's instead, along with document.getElementById(). Also link locations are .href, not .src.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about keeping the href and img details together?
    Code:
    var banners = [];
    banners[0] = {"href" : "Details.cfm?ProdID=310&category=7", "img" : "images/packs/pack1.jpg"};
    You could then reference banners[0]['href'] and banners[0]['img']

    Also, you can use modulo arithmetic to cycle through a set:
    Code:
    newBanner = (newBanner + 1) % banners.length;


Bookmarks

Posting Permissions

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