ITコラム

Pointer Selection Cursor Access Connection Networking Concept

JavaScript

2017.12.25

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

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.マウスオーバー時にテキストを表示する

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

プログラマカレッジ

JavaScript【 サンプル 】1

JavaScript【 サンプル 】2

JavaScript【 サンプル 】3

JavaScript【 サンプル 】4

JavaScript【 サンプル 】5

JavaScript【 サンプル 】6

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

<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【 サンプル 】1</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【 サンプル 】2</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【 サンプル 】3</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【 サンプル 】4</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【 サンプル 】5</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【 サンプル 】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 属性で指定します。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.