img要素のclass属性が「rollover」となっている画像に対してロールオーバーが適用されるJavaScriptを良く見かける。当サイトでも以前はこちらの「rollover.js」を使用し、現在はこちらのjQuery版を実装している。かつてのロールオーバーに比べればかなり容易に設置できるようになったのだが、それでもカーソルが「ON」・「OFF」2種類の画像を用意しなくてはならない。

しかし、「ON」状態の時は「OFF」状態に比べ薄い色の画像（白っぽい画像とか）にすることがほとんど。そこで、「ON」状態では「OFF」状態の画像に透過PNGを重ねてみることにした。これならば「OFF」状態の画像だけ用意すれば良い。


フツーに考えるとこんな感じだろうか？

動作サンプル↓


[codesyntax lang=”html4strict” title=”HTML+スタイルシート”]

<div style="width: 292px; height: 67px; background-image: url(http://hogehoge.com/images/logo.gif); padding: 0;">
  <a href="#">
    <img class="rollover" style="width: 292px; height: 67px;" src="http://hogehoge.com/images/img_rollover.png" alt="" />
  </a>
</div>

[/codesyntax]

スタイルシートで背景に指定したロゴ画像「logo.gif」の上に、imgタグで「OFF」状態用には透明PNG画像「img_rollover.png」を指定、「ON」状態用は白色の50%透過PNG画像「img_rollover_on.png」とした。透過PNG画像は1ピクセルx1ピクセルだが、スタイルシートで「logo.gif」と同サイズに拡大。



↓しかしインライン要素ではこうなってしまう。

上の方しか表示されない（ブラウザによっては見えるかも）。


[codesyntax lang=”html4strict” title=”HTML+スタイルシート、インライン要素”]

<a style="background-image: url(http://hogehoge.com/images/logo.gif); padding: 0;" href="#">
  <img class="rollover" style="width: 292px; height: 67px;" src="http://hogehoge.com/images/img_rollover.png" alt="" />
</a>

[/codesyntax]



そこで直接imgタグにスタイルシートで背景画像を指定してみた！　ちょっと強引。


[codesyntax lang=”html4strict” title=”HTML+スタイルシート、img要素に背景指定”]

<a href="#">
  <img class="rollover" style="background-image: url(http://hogehoge.com/images/logo.gif); width: 292px; height: 67px;" src="http://hogehoge.com/images/img_rollover.png" alt="" />
</a>

[/codesyntax]

画像表示のためのimg要素に、スタイルシートで背景画像を指定するという荒技ながら、IE7、IE8、Safari、FireFox、GoogleChromeで動作確認OK。

TOPページへ前のページへ戻る  1 2  次のページへ