メニューボタン

質問

メニューボタンにマウスポインタを合わせると画像が入れ替わるようにしたいのですが、スタイルシートを使用しないとできないのでしょうか？

HTMLで可能であれば方法を教えていただきたいです。

もしスタイルシートの記述が必要ならその方法を教えてください。

HP作成初心者ですがよろしくお願いします。

回答No.2

amuamu00

CSSが分からないのであれば、下記で簡単にロールオーバーできます。

http://css-happylife.com/log/javascript/000157.shtml

お礼

ありがとうございました＾＾

簡単に設置することができましたm(._.)m

回答No.1

KI401

いや、スタイルシートを使うべき。
どの道このご時世にHTMLのみでWebページの「デザイン」をしようってのは、時代遅れ。
デザインはスタイルシートでやるもんだ。HTMLは論理文書でしかない。

さて、所謂「ロールオーバー」機能について。
HTMLだけでも出来た気がするけれど、やり方覚えてないのでひとまず却下。

スタイルシートでは、":hover"という疑似要素が使える。
詳しくはググってくれ。こんな感じで書く:

a.menu {
background: url("mouseout.gif") no-repeat;
}
a.menu:hover {
background: url("mouseon.gif") no-repeat;
}

これでmenuクラスを指定したa要素は、通常時背景がmouseout.gifに、
マウスが乗ったときの背景がmouseon.gifに切り替わるようになる。

それか、まぁJavaScriptで記述することも可能だ。
単純に、マウスオーバー時に背景画像を切り替えるだけだから、
～.addEventListener('mouseover', changeImage, false);
ってな感じでやればいい。
まぁその場合はクロスブラウザやら何やら考慮が必要だしスクリプトの知識が必要だが。

最後に。ひとまず「ロールオーバー」でググってみるんだ。
ではでは

お礼

ありがとうございました

難しそうなので、amuamu00さんの方法でやってみました。

またなにかありましたらよろしくお願いしますm(._.)m