■イメージを読み込んでおき、切り替えを速くしたい
↓カーソルの通過でイメージが変化する。 ↓クリックするとクルクル切り替わる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>イメージを読み込んでおき、切り替えを速くしたい</title>
<script type="text/JavaScript">
<!--
img1 = new Image(); img1.src = "images/img10.gif";
img2 = new Image(); img2.src = "images/img11.gif";
img3 = new Image(); img3.src = "images/img12.gif";
img4 = new Image(); img4.src = "images/img13.gif";
tm1 = 0;
function tmchk() {
if (tm1 == 0){
tm1 = setInterval("chg_gif()",100);
} else {
clearInterval(tm1);
tm1=0;
}
}
function chg_gif() {
switch(document.images[1].src) {
case img1.src:
document.images[1].src = img2.src;
break;
case img2.src:
document.images[1].src = img3.src;
break;
case img3.src:
document.images[1].src = img4.src;
break;
case img4.src:
document.images[1].src = img1.src;
}
}
// -->
</script>
</head>
<body>
<p>■イメージを読み込んでおき、切り替えを速くしたい</p>
<p>↓カーソルの通過でイメージが変化する。 ↓クリックするとクルクル切り替わる</p>
<p><img src="images/img10.gif" name="img_gif1" width="200" height="160" border="1" onmouseover="document.img_gif1.src=img2.src" onmouseout="document.img_gif1.src=img1.src">
<img src="images/img12.gif" name="img_gif2" width="200" height="160" border="1" onclick="tmchk()"></p>
</body>
</html>