HP作成・CSS/Javascriptでメニューアイコンや画像にロールオーバー効果/著作権フリーのweb素材屋・HP素材のおすそわけ

登録日:	2008年11月13日 12時56分
最終巡回時間:	2008年12月13日 02時48分 (632日前)
最終更新検出:	2008年12月13日 02時48分 (632日前)
最終取得成功:	2008年12月13日 02時48分 (632日前)
巡回予定:	2010年9月6日 14時17分 (23秒後)
登録BOX数:	1
リンク先:	http://hide.kanari.info/rollover.php

ページ説明: 著作権フリーのweb素材屋による、CSSやJavascriptでメニューアイコンや画像にロールオーバー（rollover）効果を加える方法の解説。

著作権フリーのweb素材屋・HP素材のおすそわけ。は約7.123点の無料ホームページ素材を配布する個人のHP素材屋です。
女性入院保険フェミニーヌ | 初めての方へ｜素材屋ブログ
著作権フリーのweb素材屋・HP素材のおすそわけ。→HPを作ろう♪→画像にロールオーバー（rollover）効果
HP作成　テンプレート書き換え　HTML覚書　webセーフカラー　お勧め本　アフィリエイト　プチ技
画像にロールオーバー効果を加えるためのTIPS
画像にロールオーバー効果をくわえてみよう!　*CSSを使う　*JavaScriptを使う
良かったら、CSS、JavaScriptによるロールオーバーの記事をオンラインブックマークしてみて下さいね。
CSS（スタイルシート）によるロールオーバー（rollover）
CSSによるロールオーバーのメリットは、ジャバスクリプトを切られた環境でも実行できると言う事でしょうか。
サンプルは、自作のテンプレートですが、TEMP#42や、TEMP#41にて使用しています。例えば、下の画像にオンマウスしてみて下さい。オンマウス時のみWELCOMEの文字が表示されますよね。
このロールオーバーのスタイルシートは、こんな風になってます。
<title></title>の下に以下のタグを書き足して下さい。
<style type="text/css">
<!--
.rollover { display:block; background-image : url(通常時の画像); }
A:HOVER.rollover { background-image : url(マウスオーバー時の画像); }
-->
</style>
で、HTML部分はこうです。
<a href="#" class="rollover"><img src="d.gif" width="150" height="150" border="0"></a>
"d.gif"は、透過GIFによるダミーです。用意しておくと、スペーサー等に利用できて結構便利ですよ。無い方は、下の枠を右クリックして保存してご利用くださいね。
←保存しやすいように拡大して表示していますが、実際は1px四方です。
この方法のポイントは、display:block; を必ず入れる事、ダミー画像にwidthとheight指定を忘れない事です。あと、スタイルシートのクラス指定は、別に「rollover」じゃなくて任意の文字列で構いません。構成さえ理解すれば、簡単ですよね。
※ダミーのwidthとheight指定は、ロールオーバーしたい画像と同じサイズで指定して下さい。背景として配置しているので、指定サイズが画像サイズより大きいと面白い事になります。左が例です。
2007/03/07...CSSによるロールオーバーの解説up。
▲ページの先頭へ
JavaScript（ジャバスクリプ...

管理サイト - HP素材のおすそわけ。が管理するサイトです。