|
MENU |
| TOP |
| JavaScript |
| HTML |
| FLASH |
| LINK |
| 相互リンク |
●マウスの操作に合わせて画像を変化させる
画像の上にマウスが乗った時や、画像をクリックした時に表示する画像を変化させています。
他のページへのリンクボタンなどに使うと、見た目も楽しく・わかり易くなりますよね。
サンプルコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>サンプル07</TITLE>
<SCRIPT type="text/javascript">
<!--
var ButtonImage = new Array();
for(i = 1; i < 4; i++) {
ButtonImage[i]= new Image();
ButtonImage[i].src="js_sample_images/07_button" + i + ".jpg";
}
function SetImage1(flag, position) {
document.images[position].src=ButtonImage[flag].src;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
マウスの操作に合わせて画像を変化させる
<P>
<A href="#" onMouseOver="SetImage1(2,0)" onMouseOut="SetImage1(1,0)" onClick="SetImage1(3,0)">
<IMG src="js_sample_images/07_button1.jpg" alt="button1" border=0 width="200" height="50"></a>
</P>
<P>
<A href="#" onMouseOver="SetImage1(2,1)" onMouseOut="SetImage1(1,1)" onClick="SetImage1(3,1)">
<IMG src="js_sample_images/07_button1.jpg" alt="button2" border=0 width="200" height="50"></a>
</P>
</BODY></HTML>
動作サンプルはこちら