Results 1 to 3 of 3

Thread: Random Image with Specific Links

  1. #1
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Random Image with Specific Links

    I am fairly new with JavaScript and have been working on something for the last few days I can't seem to get to work so figure someone here has to be able to say how I might go about this or if it's possible.

    I have two kinds of adverts I am doing. One type is for one URL that has several image it will be randomly rotated through. I am able to get them to work using the following.
    Code:
    <style type="text/css">
    	#advert1{width:175px; height:60px; }
    	#advert2{width:175px; height:60px; }
    </style> 
    
    <a href="http://www.LINK 1.com/" target="_blank">
    <div id="advert1"></div>
    </a> 
    
    <br />
    
    <a href="http://www.LINK 2.com/" target="_blank">
    <div id="advert2"></div>
    </a> 
    
    <script type="text/javascript">
    	var rand01 = Math.round(4*Math.random());
    	var advert1 = document.getElementById('advert1');
    	advert1.style.backgroundImage = 'url(/img-175x60-'+rand01+'.png)'
    	
    	var rand02 = Math.round(3*Math.random());
    	var advert2 = document.getElementById('advert2');
    	advert2.style.backgroundImage = 'url(/img-175x60-'+rand02+'.png)';
    </script>
    The second type is one advert spot that randomly rotates through ads that the a specific image is suppose to have the link of a specific URL.

    So like page load 1 you get image 1 and it links to site 1. Second page load you get image 5 that links with site 5. I have been able to get the images to work using a modified of the above with if statements, but I can't for the life of me figure out how to make it so the image/link are together.

    I figure something like below might work, but no dice.

    Code:
    <style type="text/css">
    #xDisp{width:175px; height:60px; }
    </style>
    
    <div id="xDisp"></div>
    
    <script type="text/javascript">
    var img = new Array(NumberOfAdverts);
        img[0] = "image0.jpg";
        img[1] = "image1.jpg";
        img[2] = "image2.jpg";
    
    var url = new Array(NumberOfAdverts);
        url[0] = "http://link 0.com/";
        url[1] = "http://link 1.com/";
        url[2] = "http://link 2.com/";
    
    var randnum = Math.round(2*Math.random());
    if (randnum == 0) 
    	{
    	document.images["advert"].src = img[0];
       	document.getElementById("xDisp").innerHTML = url[0];
       	}
    if (randnum == 1) 
    	{
    	document.images["advert"].src = img[1];
       	document.getElementById("xDisp").innerHTML = url[1];
       	}
    if (randnum == 2) 
    	{
    	document.images["advert"].src = img[2];
       	document.getElementById("xDisp").innerHTML = url[2];
       	}
    </script>
    I also thought maybe a call function...

    Code:
    <style type="text/css">
    #xDisp{width:175px; height:60px; }
    </style>
    
    <a href="javascript:void(0)" onclick="advert()">
    <div id="xDisp"></div>
    </a>
    
    <script type="text/javascript">
    var randnum = Math.round(2*Math.random());
    var url = new Array(NumberOfAdverts);
        url[0] = "http://link 0.com/";
        url[1] = "http://link 1.com/";
        url[2] = "http://link 2.com/";
    	
    function advert()
    {
    	document.getElementById("xDisp").innerHTML = url[randnum];
    	if (randnum == 0) 
    	{
    		var xDisp = document.getElementById('xDisp');
    		xDisp.style.backgroundImage = 'url(/img-175x60-0.png)'
    	}
    	if (randnum == 1) 
    	{
    		var xDisp = document.getElementById('xDisp');
    		xDisp.style.backgroundImage = 'url(/img-175x60-1.png)'
    	}
    	if (randnum == 2) 
    	{
    		var xDisp = document.getElementById('xDisp');
    		xDisp.style.backgroundImage = 'url(/img-175x60-2.png)'
    	}
    }	
    </script>
    I just really can't seem to get anything to work so any help would be great. This is going to be updated over a period time as adverts are added and I would also like it to be light weight. Something I could figure out how to update (from my ability of the codes above should show you my newbishness level of JavaScript).
    Last edited by Sachmet; 03-09-2009 at 11:37 AM. Reason: Fix spelling

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    You want something like:

    Code:
    <a id="myLink" href="somedefaultlink.com"><img id="myImage" src="somedefault.jpg"></a>
    <script type="text/javascript">
    (function(){
     var ims = ['some_0.jpg', 'some_1.jpg', 'some_2.jpg', 'some_3.jpg'],
     thelinks = ['some_0.com', 'some_1.com', 'some_2.com', 'some_3.com'],
     l = document.getElementById('myLink'), p = document.getElementById('myImage'),
     r = Math.floor(ims.length * Math.random());
     l.href = thelinks[r];
     p.src = ims[r];
    })();
    </script>
    The names of the images and links are unimportant. They don't need numbers. There must be an equal amount of each. Each image will be linked to the link that occupies its corresponding position in the thelinks array.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Sachmet (03-09-2009)

  4. #3
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much. It worked great. Messed up the first thing, but I just made more functions specific for those and it works great. Thank you.

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
  •