SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random pics with hyperlink not working

    Hello.

    I'm not sure why it is not loading my pics with the hyperlink. Any help to identify the problem will be appreciated. Thank you for your help!

    Code:
    <title>Random Images</title>
    <style type="text/css"><!--
    body {
    
    }
    img#random {
    width:664px;
    height:240px;
    border:0;
    }
    
    /*//]]>*/
    --></style>
    <script type="text/javascript">// <![CDATA[
    var images=new Array();
    images[0]=<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>;
    images[1]=<a href="http://albuquerquenm.oneclickdigital.com/Home/Newly%20Added.asp"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/one.click.png" alt="One Click"></a>;
    images[2]=<a href="http://0-site.ebrary.com.albuq.cabq.gov/lib/abqpl/home.action"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/ebrary.png" alt="ebrary"></a>;
    images[3]=<a href="http://abcreads.blogspot.com/"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/abcreds.png" alt="abcreads"></a>;
    
    function randomImage() {
    var i=Math.floor(Math.random()*images.length);
    document.getElementById("random").src=images[i];
    
    }
    onload=randomImage;
    // ]]></script>
    <div id="container"><img id="random" alt="" /></div>

  2. #2
    SitePoint Enthusiast Dreeass's Avatar
    Join Date
    Sep 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't really check your code well because I'm on my iPod, but in your function randomImage, why not make the image a div and use the image as a BG and change it using document.getElementById('id').style.backgroundImage = CSS property.

  3. #3
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    Hi
    this line in your loop:
    Code:
    document.getElementById("random").src=images[i];
    will result in this output:
    Code:
    <img id="random" alt="" src="<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>" />
    because that is what you are telling it to do!

    You will also need some single quotes around the Array values
    Code:
    <script type="text/javascript">// <=!=[=C=D=A=T=A=[
    var images=new Array();
    images[0]='<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>';
    images[1]='<a href="http://albuquerquenm.oneclickdigital.com/Home/Newly%20Added.asp"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/one.click.png" alt="One Click"></a>';
    images[2]='<a href="http://0-site.ebrary.com.albuq.cabq.gov/lib/abqpl/home.action"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/ebrary.png" alt="ebrary"></a>';
    images[3]='<a href="http://abcreads.blogspot.com/"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/abcreds.png" alt="abcreads"></a>';
    Then you could use innerHTML to put the image into the container div
    Code:
    <div id="container"></div>
    FULL CODE EXAMPLE:
    Code:
    <script type="text/javascript">// <=!=[=C=D=A=T=A=[
    var images=new Array();
    images[0]='<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>';
    images[1]='<a href="http://albuquerquenm.oneclickdigital.com/Home/Newly%20Added.asp"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/one.click.png" alt="One Click"></a>';
    images[2]='<a href="http://0-site.ebrary.com.albuq.cabq.gov/lib/abqpl/home.action"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/ebrary.png" alt="ebrary"></a>';
    images[3]='<a href="http://abcreads.blogspot.com/"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/abcreds.png" alt="abcreads"></a>';
    
    function randomImage() {
    var i=Math.floor(Math.random()*images.length);
    document.getElementById("container").innerHTML=images[i];
    
    }
    onload=randomImage;
    // ]=]=></script>
    <div id="container"></div>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


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
  •