画像リンクのrollover

Question

メニューバーを画像リンク数個のインライン表示で準備して、それをロールオーバーさせたいのですが、どのやり方が効率がいいでしょうか？

/<img src="最初に表示する画像ファイル" onMousemove="this.src='入れ替える画像ファイル'" onMouseout="this.src='最初に表示する画像ファイル'">/

↑でやってみたのですが、私のミスなのかうまくできませんでした。もしかしてすでに使えないコードなのでしょうか？
よろしくお願いします。

Answer 1

こんにちは。

リンクバナーをマウスオーバー時に画像を切り替えるためのシンプルな記述は

<a href=“sample.html">
<img src="images/banner0.jpg" onmouseover="this.src='images/banner1.jpg'" onmouseout="this.src='images/banner.jpg'" />
</a>

ですので、その記述で動くはずですが……

記述の前後に「/* */」が見られますが、（失礼ですが）もしかしたら、コメントアウトしてしまっているというようなことはないでしょうか。

ちなみに、1枚の画像でマウスオーバー時に透過（色を薄く）させる方法は、CSSを使うことで実現できます。

<p><a href="#"><img src="images/banner.jpg” alt="banner” /></a></p>

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

透過の度合は、opacityは0〜1.0の間、filterは0〜100の間で調整します。
filterはIE用、opacityはそのほかのブラウザ用の記述です。

以上、ご参考いただければ幸いです。

Comments

[OlivaUnchain]

回答ありがとうございます！
コメントアウトは大丈夫です。この記述が通用するのであればもう一度やってみたいと思います！
1番楽なのはこの記述ですかね？
友人曰く、「外部に書き込むクセをつけないとダメ」と言われているんですが、他のサイト見ても、Javascriptよりこちらのほうが早いと書いてありまして...

あと、透過の方法参考にします！ありがとうございます！

[退会済みユーザー]

OlivaUnchainさん、コメント（返信）をいただきありがとうございます。
たしかに、自分が使い慣れているやり方のほうが安心ですからね。
でも、新しいやり方に挑戦してみるのも楽しいですよ。いろいろ試してみてください。

[OlivaUnchain]

そうですね、いろいろ試してみたいと思います！
ありがとうございました！