著作権フリーのweb素材屋・HP素材のおすそわけ。は約7.413点の無料ホームページ素材を配布する個人のHP素材屋です。

ホームページ素材,写真素材,free web graphics,free digital stock | 初めての方へ素材屋ブログ
ホームページ素材のおすそわけ。サイト作成ウェブサイト(HP)用フリーテンプレートマテリアルweb用壁紙と楽天広場用素材素材屋アイコンやプレートなど写真素材著作権フリーの写真素材ホームページ作成,HP作成ホームページ作成のヒント集ですメニューアイコン自動登録型リンク集ホームページ素材管理人との連絡用BBS

 著作権フリーのweb素材屋・HP素材のおすそわけ。→HPを作ろう♪→画像にロールオーバー(rollover)効果


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


良かったら、CSS、JavaScriptによるロールオーバーの記事をオンラインブックマークしてみて下さいね。



CSS(スタイルシート)によるロールオーバー(rollover)

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

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

ロールオーバー rollover サンプル

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

で、HTML部分はこうです。

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

ロールオーバー rollover サンプル

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


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

▲ページの先頭へ


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

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

HOME

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


<img src="基本画像(画像1)" border="0" alt="画像の説明文" onmouseover="this .src='ポイント時の画像(画像2)'" onmouseout="this .src='基本画像(画像1)'">
この場合、画像1←画像1と 画像2←画像2を使っています。(素材はコチラ
※書き換えの前後にある「'」の記号を消しちゃうと、ロールオーバーが上手く動かなくなるのでご注意下さい。

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

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

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

<style type="text/css">
<!--
A:HOVER{
background-color : #bfffff ;
position:relative ; top :2px ;
}
-->
</style>

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



CSS・JavaScriptによるロールオーバーのTIPSの記事をはてなブックマークに追加する。

total:554867hit! t:448 y:502
「HP素材のおすそわけ。」トップへ : ▲ページの先頭へ

Copyright©2005-2017 素材屋・HP素材のおすそわけ。 WebMaterials[http://hide.kanari.info/]Some rights reserved. Please feel free to make links to my website.