ホームページ 小技 テクニック
ロールオーバー
画像にマウスが重なると画像が変化します。★の部分に画像ファイル名を入力してください。
<A href="#"><IMG src="★" border="0" onMouseOver="this.src='★'" onMouseOut="this.src='★'"></A>
<p>
<script >// <![CDATA[
var img = "画像,画像,画像";
var imgs = img.split(",");
var i=0;
var pic = new Array();
for(cnt=0; cnt<imgs.length; cnt++){
pic[cnt] = new Image();
pic[cnt].src = imgs[cnt];
}
function imgChange(){
i++; i%=imgs.length;
document.getElementById("img1").src=pic[i].src;
}
// ]]></script>
</p>
<table width="200" border="1">
<tbody>
<tr>
<td><center><img id="img1" alt="" border="0" />
<script >// <![CDATA[
document.getElementById("img1").src=pic[0].src;
setInterval("imgChange()",3000);
// ]]></script>
</center></td>
</tr>
</tbody>
</table>
<script >// <![CDATA[
var img = "画像,画像,画像";
var imgs = img.split(",");
var i=0;
var pic = new Array();
for(cnt=0; cnt<imgs.length; cnt++){
pic[cnt] = new Image();
pic[cnt].src = imgs[cnt];
}
function imgChange(){
i++; i%=imgs.length;
document.getElementById("img1").src=pic[i].src;
}
// ]]></script>
</p>
<table width="200" border="1">
<tbody>
<tr>
<td><center><img id="img1" alt="" border="0" />
<script >// <![CDATA[
document.getElementById("img1").src=pic[0].src;
setInterval("imgChange()",3000);
// ]]></script>
</center></td>
</tr>
</tbody>
</table>