Q1650 How can I make an animation whereby each individual image, when clicked, links to a different url?

You are here: irt.org | FAQ | JavaScript | Image | Q1650 [ previous next ]

Try the following which preloads six images named earth01.gif through to earth02.gif, each of which is linked to a different url:

<html>

<head>
<title>Animation</title>
<script language="JavaScript"><!--
// preload images
if (document.images) {
   theImages = new Array(6);
   for (i=0, n=theImages.length; i<n; i++) {
      theImages[i] = new Image();
      theImages[i].src='earth0' + i + '.gif';
   }
}

var CurrentImage = 1;
var Run = true;
var speed = 3000; // 3 seconds

function animate() {
   if (!document.images) return;
   if (!Run) return;
   document.images["earth"].src = theImages[CurrentImage].src;
   CurrentImage++;
   if (CurrentImage > theImages.length-1) CurrentImage=0;
   setTimeout('animate()',speed);
}

links = new Array(
  'http://www.netscape.com/',
  'http://www.microsoft.com/',
  'http://www.opera.com/',
  'http://www.neoplanet.com/',
  'http://www.experts-exchange.com/',
  'http://www.irt.org/'
);

function go() {
   window.open(links[CurrentImage],'_blank');
}
//--></script>
</head>

<body onLoad="animate()">

<p align="center">
<a href="javascript:;" onClick="go();return false;"><img name="earth" src="earth00.gif" border=0></a>
</p>

<body>

</html>