ITコラム

Pointer Selection Cursor Access Connection Networking Concept

JavaScript

2017.12.25

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

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

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

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

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

<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 属性で指定します。

▲目次へ戻る

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

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

info

info

info

info

info

info

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

<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="https://programmercollege.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="https://programmercollege.jp/column/8438" onmouseover="mOver(1,'info1')" onmouseout="mOut('info1')">JavaScript【 サンプル 】１</a>
    <div id="info1" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="https://programmercollege.jp/column/8451" onmouseover="mOver(2,'info2')" onmouseout="mOut('info2')">JavaScript【 サンプル 】２</a>
    <div id="info2" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="https://programmercollege.jp/column/8509" onmouseover="mOver(3,'info3')" onmouseout="mOut('info3')">JavaScript【 サンプル 】３</a>
    <div id="info3" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="https://programmercollege.jp/column/8525" onmouseover="mOver(4,'info4')" onmouseout="mOut('info4')">JavaScript【 サンプル 】４</a>
    <div id="info4" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="https://programmercollege.jp/column/8550" onmouseover="mOver(5,'info5')" onmouseout="mOut('info5')">JavaScript【 サンプル 】５</a>
    <div id="info5" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
    
    <a href="https://programmercollege.jp/column/8584" onmouseover="mOver(6,'info6')" onmouseout="mOut('info6')">JavaScript【 サンプル 】６</a>
    <div id="info6" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div>
</div>

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

▲目次へ戻る