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

JavaScript

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

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

サンプル

ここにマウスを乗せると

ここの文章が・・・

 

ソースコード ver1.0

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

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

 

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

 

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

 

 

ソースコード ver2.0

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

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

 

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

 

PR

関連記事