ジャバスクリプトを使わずに、背景画像としてCSSでロールオーバーさせる方法。
#image a{ display:block; width:200px;(画像の幅) height:50px;(画像の高さ) line-height:50px;(高さを指定して文字の高さを中央揃えにする) color:文字色; background:url(../img/画像ファイル1) no-repeat; text-decoration:none; text-align:center;}(文字を中央に揃える) #image a:hover{ color:文字色; (マウスが重なった時の文字の色) background:url(../img/画像ファイル1) no-repeat; }
HTMLの記載は
<div id =”image”><a href=”URL”>○○○○(ここに文字が入る)</a></div>
重要なのは、CSS2行目の「display:block」という指定。
ロールオーバーをリンクの<a>タグに使う場合に使用する。
これをブロック要素といい、これを書かないと、画像が上手く表示されないので注意。
画像だけのロールオーバーの場合
#image1 a{ display:block; width:278px; height:89px; background:url(img/logo_web1.png) no-repeat; } #image1 a:hover{ background:url(img/logo_web1_2.png) no-repeat; }
HTMLの記載は
<div id ="image1"><a href="webdesign/rinen"></a></div>
画像のロールオーバーは、簡単!