TOPページ >  クリックやマウスオーバーで表示が変化(イベントパンドラ) > イベントパンドラ:マウスを重ねると説明が表示される

イベントパンドラ:マウスを重ねると説明が表示される

簡単なJavaScrip を使って、ウェブサイト内の文字などにマウスポインタが重なったときに説明などの文章をを表示させる(表示を変化させる)ことができます。

ビタミンの基礎知識
項目にマウスを重ねてください。説明が表示されます。

このソースは、次のようになっています。

<ul style="float:left;widht:120px;margin:0 10px 0 0;padding-left:20px;">
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('A')" onMouseOut="VitaOut()">
ビタミンA</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('B1')" onMouseOut="VitaOut()">
ビタミンB1</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('B2')" onMouseOut="VitaOut()">
ビタミンB2</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('C')" onMouseOut="VitaOut()">
ビタミンC</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('D')" onMouseOut="VitaOut()">
ビタミンD</a>
</ul>
<div id="VitaArea">ビタミンの基礎知識</div>
<div style="clear:left;">項目にマウスを重ねてください。説明が表示されます。</div>

<script>
function VitaOn(data) {
if ( data == 'A' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"
ビタミンAは、お肌や粘膜(喉や内蔵)の状態を健康に保つのに欠かせない栄養素です。また網膜に多く含まれており、視力を正常に保つ働きがあります。不足すると目の疲れや視力の低下につながります。";
}
if ( data == 'B1' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"
糖質を分解する酵素の働きを助け、エネルギーに換える役割を果たします。ですからビタミンB1が不足すると糖質のエネルギー代謝が悪くなり、疲れやすく、動悸や手足のむくみなどが出てきやすくなります。";
}
if ( data == 'B2' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"
ビタミンB2は脂質や糖質の分解を助ける補酵素としての働きと、肌や爪、髪の成長を促進する働きがあります。";
}
if ( data == 'C' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"
ビタミンC(アスコルビン酸)の主な役割は、細胞をつなぐコラーゲンの生成や白血球の働きを助けることです。";
}
if ( data == 'D' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"
ビタミンDはカルシウムやリンの吸収を助けます。発育期の子供や妊婦、授乳期の女性は特に成人の3倍の量が必要です。また骨や歯の弱くなる老齢期の人も積極的に摂取しましょう。";
}
}

function VitaOut() {
var objid=document.getElementById('VitaArea');
objid.innerHTML= "
ビタミンの基礎知識";
}
</script>

このサンプルでは、マウスが項目に重なったとき(onMouseOver)に、VitaOnというファンクションを、マウスが項目から外れたとき(onMouseOut)に、VitaOutというファンクションを実行するように設定されています。

ファンクションVitaOnではAB1B2CDといった文字列がdataという引数として引き渡されており、if文でどの因数かを判別し、VitaAreaという段落内に表示する文章を決定しています。

このソース中に出現するonMouseOverや、onMouseOutといった、JavaScriptを呼び出すためのユーザーの行動をイベントパンドラと呼びます。イベントパンドラには上記を含め次のようなものがあります。

  • onMouseDown :対象の上でマウスボタンを押す
  • onMouseClick :対象の上でマウスボタンをクリックする
  • onMouseOver :対象の上にマウスカーソルが重なる
  • onMouseOut :対象の上からマウスカーソルが外れる
  • onChange :対象のフォーム項目の内容が変更される
  • onLoad :対象のドキュメント・フレームが読み込み終わる

本サンプルでは、onMouseDown や、onMouseClick も使えます。

innerHTML内で、ソースに改行を入れないでください。(表示としての改行タグ<br>はOK)エラーの原因となります。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
イベントパンドラ:マウスを重ねると説明が表示される
イベントパンドラ:マウスを重なると画像が変化する
レイヤーを使って折りたたみメニューを表示する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス