JavaScript【 サンプル 】7 ~ マウスオーバー時の記述方法

Pointer Selection Cursor Access Connection Networking Concept

JavaScript の記述方法のサンプルを挙げてみます。
今回は、マウスオーバー時の処理の記述方法についてのサンプルを紹介します。

目次

 
1.マウスオーバー時に画像を切り替える
2.マウスオーバー時にテキストを表示する

1.マウスオーバー時に画像を切り替える

 
マウスオーバー時に画像を切り替えます。
画像にマウスポインタを当ててみて下さい。

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
var img = new Array();
img[0] = new Image(100,100);
img[1] = new Image(100,100);
img[0].src = "img_0.jpg";
img[1].src = "img_1.jpg";

function changeImg(num) {
    document.getElementById("image").src = img[num].src;
}
//-->
</script>

<div style="background-color : #CCC;">
    <img id="image" src="img_0.jpg"
     width="100" height="100"
     onmouseover="changeImg(0)"
     onmouseout="changeImg(1)">
</div>

 
マウスポインタが当たった際の処理は onmouseover 属性で指定し、マウスポインタが外れた際の処理は onmouseout 属性で指定します。

▲目次へ戻る

 

2.マウスオーバー時にテキストを表示する

 
マウスオーバー時にテキストを表示します。
リンクにマウスポインタを当ててみて下さい。

  
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
var infoAry = [
"本サイトのトップページです。",
"JavaScriptの基本的な書き方のサンプルを紹介しています。",
"JavaScriptの便利な書き方のサンプルを紹介しています。",
"JavaScriptの数字関連の書き方のサンプルを紹介しています。",
"JavaScriptの表示関連の書き方のサンプルを紹介しています。",
"JavaScriptの画面サイズや使用ブラウザに関するサンプルを紹介しています。",
"JavaScriptのウィンドウの開閉と生成の書き方のサンプルを紹介しています。"
];

function mOver(num,obj) {
    document.getElementById(obj).innerHTML = infoAry[num];	
    document.getElementById(obj).style.visibility = "visible";
}
	
function mOut(obj) {
    document.getElementById(obj).style.visibility = "hidden";
}
//-->
</script>

<div style="background-color : #CCC;">
    <a href="http://www.recipi.jp" onmouseover="mOver(0,'info0')" onmouseout="mOut('info0')">プログラミング入門レシピ</a>
    <div id="info0" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> 
   
    <a href="http://www.recipi.jp/8438" onmouseover="mOver(1,'info1')" onmouseout="mOut('info1')">JavaScript【 サンプル 】1</a>
    <div id="info1" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="http://www.recipi.jp/8451" onmouseover="mOver(2,'info2')" onmouseout="mOut('info2')">JavaScript【 サンプル 】2</a>
    <div id="info2" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="http://www.recipi.jp/8509" onmouseover="mOver(3,'info3')" onmouseout="mOut('info3')">JavaScript【 サンプル 】3</a>
    <div id="info3" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="http://www.recipi.jp/8525" onmouseover="mOver(4,'info4')" onmouseout="mOut('info4')">JavaScript【 サンプル 】4</a>
    <div id="info4" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="http://www.recipi.jp/8550" onmouseover="mOver(5,'info5')" onmouseout="mOut('info5')">JavaScript【 サンプル 】5</a>
    <div id="info5" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="http://www.recipi.jp/8584" onmouseover="mOver(6,'info6')" onmouseout="mOut('info6')">JavaScript【 サンプル 】6</a>
    <div id="info6" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
</div>

 
表示させたいテキストを 配列変数 infoAry に格納しておいて、マウスポインタが当たった際に表示させています。
マウスポインタが外れた際の処理も忘れずに onmouseout 属性で指定します。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です