img.css-hover{
opacity:0.8; ← IE以外
filter: alpha(opacity=80); ← IE
}
| |
<div style="position:absolute;left:30;top:94">
<img src="water.jpg" width="112" height="80" border="0" class="css-hover">
</div>
|
|
|
<body onload="kingyo()">
| ブラウザがページの読み込み完了時kingyo()を実行
|
|
| ↓ 動く金魚と目を設定 |
|
num=1; | 変数numを1に設定 |
function kingyo(){
if(num==1){
document.photo.src="kingyo1.gif";
document.eye.src="eye1.gif";
num=2; |
 | 金魚の動きと目の動き
を合わせる |
 |
|
}else if(num==2){
document.photo.src="kingyo2.gif";
document.eye.src="eye2.gif";
num=3; |
|
}else if(num==3){
document.photo.src="kingyo3.gif";
document.eye.src="eye3.gif";
num=1;
} |
|
setTimeout("kingyo()",500);
} | 0.5秒毎に、kingyo()を読み込み、
num=1〜3を繰り返す |
water1.jpg | この部分の上に |
water1.jpg |
を表示(display: block)し、目の画像を隠しておく |
|
<div id="water" style="position:absolute;left:48;top:95;display: block;">
<img src="water1.jpg" width="50" height="17" border="0"></div>
|
|
| ↓ 入れ替えるそれぞれの画像に id を設定 |
<div id="ta1" style="position:absolute;top:36;left:80">
<img src="tanKINGYO12.gif" width="160" height="170" border="0"> |
画像tanKINGYO12.gifにidをta1に設定 |
<div id="ta2" style="position:absolute;top:68;left:35;display: none">
<img src="tanKINGYO34.gif" width="210" height="140" border="0"> |
画像tanKINGYO34.gifにidをta2に設定 |
<div id="water" style="position:absolute;left:48;top:95;display: block;">
<img src="water1.jpg" width="50" height="20" border="0"> |
画像water1.jpgにidをwaterに設定 |
|
| ↓ マウスオーバーか、アウトで画像変更 |
|
<a onmouseover="tango(1)" onmouseout="tango(0)">
|
function tango(eye)を読み込む
|
function tango(eye){
if(eye==1){ |
マウスオーバーの
tango(1)なら
| |
document.getElementById("ta1").style.visibility = "hidden"; | tanKINGYO12.gifを非表示 |
|
document.getElementById("ta2").style.visibility = "visible"; | tanKINGYO34.gifを表示 |
|
document.getElementById('water').style.display="none"; | water1.jpgを非表示
|
|
| visibilityとdisplayの違い
|
|
