2010年08月26日

cssでロールオーバー

これまで、ロールオーバーはjavaで動かしていたが、スタイルシート(css)で挑戦

ソースはjavaよりも簡単
<style type="text/css">
<!--
.rollover { display:block; background-image : url(通常の画像.jpg); }
A:HOVER.rollover { background-image : url(マウスオーバー時の画像.jpg); }
-->
</style>

<a href="#" class="rollover"><img src="透明画像.gif" width="画像横サイズ" height="画像縦サイズ" border="0"></a>

透明画像.gifは、ダミーとなる透過GIFを用意
サイズは、小さいもので可能。例えば1px×1pxでもOK

これだけだと internet explorer では問題なく動くが、Mozilla Firefox や Netscape Navigatorでは、CSSにfloat(フロート)がないとbackgroundが一部しか表示されない
floatは、leftとrightしかなく、中央に配置したかったので、tableで囲んでどうにかうまくいきました

最終形
<style type="text/css">
<!--
.rollover { display:block; background-image : url(通常の画像.jpg); float:left;}
A:HOVER.rollover { background-image : url(マウスオーバー時の画像.jpg); float:left;}
-->
</style>

<table><tr><td><a href="#" class="rollover"><img src="透明画像.gif" width="画像横サイズ" height="画像縦サイズ" border="0"></a></td></tr></table>


posted by ガンさん | Comment(0) | ホームページ作成 |
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: