画像にロールオーバー効果をくわえてみよう!　CSSを使う　JavaScriptを使う

CSS（スタイルシート）によるロールオーバー

CSSによるロールオーバーのメリットは、ジャバスクリプトを切られた環境でも実行できると言う事でしょうか。
サンプルは、自作のテンプレートですが、TEMP#42や、TEMP#41にて使用しています。

例えば、下の画像にオンマウスしてみて下さい。オンマウス時のみWELCOMEの文字が表示されますよね。

このロールオーバーのスタイルシートは、こんな風になってます。
<title></title>の下に以下のタグを書き足して下さい。

で、HTML部分はこうです。

"d.gif"は、透過GIFによるダミーです。用意しておくと、スペーサー等に利用できて結構便利ですよ。無い方は、下の枠を右クリックして保存してご利用くださいね。
←保存しやすいように拡大して表示していますが、実際は1px四方です。

この方法のポイントは、display:block; を必ず入れる事、ダミー画像にwidthとheight指定を忘れない事です。あと、スタイルシートのクラス指定は、任意の文字列で構いません。構成さえ理解すれば、簡単ですよね。
※ダミーのwidthとheight指定は、ロールオーバーしたい画像と同じサイズで指定して下さい。背景として配置しているので、指定サイズが画像サイズより大きいと面白い事になります。左が例です。

2007/03/07...CSSによるロールオーバーの解説up。

▲ページの先頭へ

JavaScript（ジャバスクリプト）によるロールオーバー

下のサンプルにマウスポインタを置いてみて下さい、色が変わります♪（IE、FireFox、OPERAで確認）

※以下のピンクのマーカー部分をコピーペーストして、太文字の部分を書き換えます。

<img src="基本画像（画像1）" border="0" alt="画像の説明文" onmouseover="this .src='ポイント時の画像（画像２）'" onmouseout="this .src='基本画像（画像１）'">
この場合、

←画像1と　

←画像2を使っています。（素材はコチラ）
※書き換えの前後にある「'」の記号を消しちゃうと、ロールオーバーが上手く動かなくなるのでご注意下さい。

リンクを貼りたい場合
<a href="リンク先のアドレス"><img src="基本画像（画像1）" border="0" alt="画像の説明文" onmouseover="this .src='ポイント時の画像（画像２）'" onmouseout="this .src='基本画像（画像１）'"></a>
でオッケーです♪

←クリックしてみてね。トップに戻ります♪

ちなみに背景が水色になって画像の位置が下がるのは、スタイルシートによる指定だったりします。
同じようにしたい方は、<title></title>の下に以下のタグを書き足してね。

<style type="text/css">

</style>

尚、ロールオーバーのTIPSはみんなのタグ辞書様を参考にさせて頂きました。有難うございますm（_ _）m。

この記事をはてなブックマークに追加する。

total:2815485hit! t:529 y:3402
「ＨＰ素材のおすそわけ。」トップへ : ▲ページの先頭へ

HPを作ろう テンプレートの書き換え方法 HTML覚書 webセーフカラー オススメ本 アフィリエイト プチ技

画像にロールオーバー効果を加えるためのTIPS

画像にロールオーバー効果をくわえてみよう! *CSSを使う *JavaScriptを使う

CSS（スタイルシート）によるロールオーバー

JavaScript（ジャバスクリプト）によるロールオーバー

※以下のピンクのマーカー部分をコピーペーストして、太文字の部分を書き換えます。

HPを作ろう　テンプレートの書き換え方法　 HTML覚書　 webセーフカラー　オススメ本　アフィリエイト　プチ技

　画像にロールオーバー効果を加えるためのTIPS

画像にロールオーバー効果をくわえてみよう!　CSSを使う　JavaScriptを使う