Link Images To Web Link

Firstly, I am not a web designer and I have very limited knowledge of html, css, javascript etc. I am running a script which displays a random image each time the page is refreshe

Solution 1:

You can do like this...

</div>




<div id="outcome">

<script language="JavaScript">

function random_imglink(){
var myimages=new Array()

var mylink=new Array()

myimages[1]="expose.png"
mylink[1]="www.atrein.com"
myimages[2]="inform.png"
mylink[2]="www.atrein.ir"
myimages[3]="explain.png"
mylink[3]="www.apadana-business.com"
myimages[4]="formulate.png"
mylink[5]="www.google.com"



var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href="'+mylink[ry]+'" ><img src="'+myimages[ry]+'" border=0> </a>')
}
random_imglink()

</script>

Solution 2:

You can do something similar to this, identical procedure as the image tags,

<a href="javascript:document.location.reload();"
ONMOUSEOVER="window.status='Refresh'; return true">
<img src="Graphic-design-can-[TEST].png" width="auto" height="auto"//>
</a>

</div>

<div id="outcome">

<script language="JavaScript">

function random_imglink(){
var myimages=new Array()
var myurls=new Array()

myimages[1]="expose.png"
myimages[2]="inform.png"
myimages[3]="explain.png"
myimages[4]="formulate.png"
myimages[5]="record.png"
myimages[6]="mediate.png"
myimages[7]="design.png"
myimages[8]="persuade.png"
myimages[9]="summarise.png"
myimages[10]="generate.png" 

myurls[1]="http://google.com"
myurls[2]="http://stackoverflow.com"
.....
....


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href="'+myurls[ry]+'"><img src="'+myimages[ry]+'" border=0 id="'+myimages[ry]+'" onClick="'+dosomething(myimages[ry])+'") /></a>')
}

random_imglink()

function dosomething(myimage)
{
      switch(myimage)
      {
             case 'expose.png':
                     p = document.createElement("p");

                     img = document.createElement("img");
                     img.id="minutesTens";
                     img.src = "1.gif";
                     p.appendChild(img);
                     break;

             case 'inform.png':
                     p = document.createElement("p");

                     img = document.createElement("img");
                     img.id="minutesTens";
                     img.src = "2.gif";
                     p.appendChild(img);
                     break;
              case.....
              ..........
              ..........

 }

</script>

What this code says: The image which is being created with the document.write function will contain the ID and a event call "onClick". The function onClick() will be called with the parameter "ID". Where the ID of the current image will be passed.

The dosomething() function get the ID of the image and set the next image according to the switch case statements. I hope it is clear now. Hope it helps.