JavaScriptを使ってマウスのロールオーバでメッセージを表示したり切り替える方法

JavaScript

getElementByIdメソッドとinnerHTMLプロパティを使えばページ内の文章などを後から変更することができます。

まずはサンプルをご覧ください。

サンプル

ここにマウスを乗せると

ここの文章が・・・

 

ソースコード ver1.0

まずはシンプルにマウスを乗せたときだけメッセージを変えます。

	
<p id="btn" onmouseover="msg()">ここにマウスを乗せると</p>

<p id="msgbox">ここの文章が・・・</p>

ボタンにマウスが乗っかったら、onmouseoverイベントでmsg()関数を呼び出します。

 

<script type="text/javascript">
	function msg(){
		document.getElementById("msgbox").innerHTML = "内容が変わります。";
	}
</script>

getElementById(“id名”) で、メッセージを変更したい要素を指定します。

 

<style type="text/css">
	#btn{
		border: 1px solid #ccc;
		border-radius: 5px;
		background-color: #eee;
		padding: 10px;
		width: 150px;
		font-size: 12px;
		text-align: center;
	}
	#msgbox{
		border: 1px solid #666;
		padding: 10px;
		width: 300px;
	}
</style>

CSSに関しては、動きに関係ないので自由に変更してください。

 

 

ソースコード ver2.0

次にマウスが離れたら元のメッセージに戻す仕様に修正します。

<script type="text/javascript">
	function msg(str){
		document.getElementById("msgbox").innerHTML = str;
	}
</script>

msg()関数を、引数でメッセージを受け取り表示する様に修正します。

 

<p id="btn" onmouseover="msg('内容が変わります')"  onmouseout="msg('ここの文章が・・・')">ここにマウスを乗せると</p>
<p id="msgbox">ここの文章が・・・</p>

onmouseoutイベントを追加し、引数の値を変更します。

 

入門者のJavaScript (ブルーバックス)

関連記事