www.webdeveloper.com
Results 1 to 2 of 2

Thread: Random Image with link

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    Random Image with link

    I an new here and quite a novice at coding but I have the following code:
    Code:
    <script>
    var myPix = ["images/cia.jpg" , "images/mafia.jpg","images/johnson.jpg" , "images/cuba.jpg" ,"images/oswald.jpg" ];
    
    function randomPic() {
    		var randomNum = Math.floor((Math.random() * myPix.length));
    		document.getElementById("myPix").src = myPix[randomNum];
    		
    }
    
    <script>
    on the html document I have this:

    HTML Code:
    <div id = "randomPic"><img  src="images/cia.jpg" width="305" height="312" id="myPix" /></div>

    How can I make it so that each image also acts as a hyperlink to a page?
    I have looked at examples around the net and modified the code to no avail.
    I have tried using different browsers.

    I have also tried doing this:

    Code:
    var myPix = new Array();
    	
    	myPix[0] = '<a href="a.html"><img src = "images/cia.jpg" ></a>';
    	myPix[1] = '<a href="b.html"><img src = "image/mafia.jpg" ></a>';
    	myPix[2] = '<a href="c.html"><img src = "images/johnson.jpg" ></a>';
    	myPix[3] = '<a href="d.html"><img src = "images/cuba.jpg" ></a>';
    	myPix[4] = '<a href="e.html"><img src = "images/oswald.jpg" ></a>';
    but still nothing.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,635
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>qwert</title>
    <script>
    var mypix=[
    ['img1.jpg','http://somewhere.com/page1.htm'],
    ['img2.jpg','http://somewhere.com/page2.htm'],
    ['img3.jpg','http://somewhere.com/page3.htm'],
    ['img4.jpg','http://somewhere.com/page4.htm'],
    ['img5.jpg','http://somewhere.com/page5.htm'],
    ['img6.jpg','http://somewhere.com/page6.htm'],
    ['img7.jpg','http://somewhere.com/page7.htm'],
    ['img8.jpg','http://somewhere.com/page8.htm'],
    ['img9.jpg','http://somewhere.com/page9.htm'],
    ['img10.jpg','http://somewhere.com/page10.htm']
    ];
    
    function showImg(){
    var index=Math.floor((Math.random() * mypix.length));
    document.getElementById('content').innerHTML='<a href="'+mypix[index][1]+'"><img src="'+mypix[index][0]+'" width="300" height="300" alt="'+mypix[index][0]+'" /></a><br /><br />link: '+mypix[index][1]+'<br />src: '+mypix[index][0];
    }
    
    window.onload=function(){
    setInterval(showImg,500);
    }
    </script>
    </head>
    <body>
    <center>
    <div id="content"></div>
    </center>
    </body>
    </html>
    Last edited by Padonak; 11-27-2013 at 12:30 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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