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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

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

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

<script type="text/javascript">

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

▲目次へ戻る

　

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

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

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

<script type="text/javascript">

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

▲目次へ戻る