2008年10月22日

オンマウスで画像を入れ替えてみる

ウェブサイトやブログを作成していると、やはり見た目のアクションにコリたくなる時があります。今日は簡単なところで、マウスポインタを画像に乗せた時に別の画像に変わるか試してみたいと思います。
まず、用意するものは2つの画像ですが、今回サンプルとして以下の2つを作ってみました。

【サンプル(1)】
サンプル画像(1)

【サンプル(2)】
サンプル画像(2)

今回、「ホームページお役立ち小技集」のオンマウスで画像をかえるを参考に、とりあえず以下のHTMLタグを作成!さ〜どうでしょうか。
ちなみに、ブログの場合なら表示するページによってファイルの階層が異なってきますので、ファビコン同様に絶対パスで記述したほうが無難だと思います。

<img src="http://v0-0v.up.seesaa.net/image/sample1.gif" onmouseover="this.src='http://v0-0v.up.seesaa.net/image/sample2.gif'" onmouseout="this.src='http://v0-0v.up.seesaa.net/image/sample1.gif'" alt="サンプル画像(3)" width="325" height="60" />

これを貼り付けたのが以下の画像ですが、どうですか?Internet Explorer/Firefox/Safariでは問題ないのですが、Operaだけ何かおかしいですよね…?(汗)

【実際の例題】
サンプル画像(3)

これは色んな環境や画像によって異なるのかもしれませんが、私の場合、Operaだけ画像が入れ替わる瞬間(一瞬)ALT属性の文字が表示されてしまうんです。

そこでよーく参考サイトを見てみると、変更後の画像を予めブラウザに読み込ませておくと解消されることが判明しました。^^; 説明では width="1" height="1" となっていますが、 width="0" height="0" でも大丈夫のようです。な〜るほど。

この画像をAタグで括れば、ボタン風のリンク完成というわけですね。
ラベル:オンマウス 画像
posted by メガネ君 v0-0v at 18:37 | TrackBack(0) | Webサイト制作 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。