Link Roulette -with Image-

Description:

下の画像にマウスを合わせると、画像が回りだし、 クリックするタイミングによってリンク先を変えます。

Demo:

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<script language="JavaScript" type="text/javascript">
<!--
function setRltimg(imgsrc, url) {
 if(!document.images) { return; } 
 this.img = new Image();
 this.img.src = imgsrc;
 this.src = this.img.src;
 this.url = url;
}

function linkRouletteImage(num) {
 if(!document.images) { return; }
 if(!num) { num = 0; }
 var imgid = "linkrltimg";
 if(num == -1 || num == 1) {
   clearTimeout(rltimg_timer);
   if(num == -1) { 
    location.href = rltimg_currenturl;
   }
   return;
 }
 rltimg_count = (rltimg_count < rltimg_arrct-1) ? rltimg_count+1 : 0;
 rltimg_currenturl = rltimg[rltimg_count].url;
 document.images[imgid].src= rltimg[rltimg_count].src;
 rltimg_timer = setTimeout("linkRouletteImage()", 50); //ルーレットの速さ
}

if(document.images) {
 var rltimg_timer= false;
 var rltimg_count= 0;
 var rltimg_currenturl = "";
 var rltimg_arrct = 0;
 var rltimg = new Array();

 //setRltimg("画像パス", "リンク先URL");
 rltimg[rltimg_arrct++] = new setRltimg("../_image/logo/oracle.gif", "http://www.oracle.co.jp/"); //画像とリンクの設定
 rltimg[rltimg_arrct++] = new setRltimg("../_image/logo/ie3.gif", "http://www.microsoft.com/");
 rltimg[rltimg_arrct++] = new setRltimg("../_image/logo/ns3.gif", "http://www.netscape.com/");
 rltimg[rltimg_arrct++] = new setRltimg("../_image/logo/mosaic.gif", "http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/");
 rltimg[rltimg_arrct++] = new setRltimg("../_image/logo/grail.gif", "http://monty.cnri.reston.va.us/grail-0.3/");
 rltimg[rltimg_arrct++] = new setRltimg("../_image/ban_simple.gif", "http://www2f.biglobe.ne.jp/~takan/javac/");

//以下、画像を増やす場合は
// rltimg[rltimg_arrct++] = new setRltimg("画像パス", "リンク先URL");
//を書き足していく。
}


//-->
</script>

</head>

<body>


<a href="javascript:linkRouletteImage(-1)" onMouseover="linkRouletteImage(0)" onMouseout="linkRouletteImage(1)">
 <img src="../_image/ban_simple.gif" name="linkrltimg">
</a>


</body>
</html>

Advice:

Arrangement:

Browser:

Internet Explorer4.0以上
Netscape Navigator3.0以上
[ Back ]