« こんな娘がいたら僕はもうっ…！！ | Home | あんた最高だよ！ »

20061008

CSSロールオーバー

あたしが最近調子コイて使っているスタイルシートを使用したロールオーバー・ポップアップ。こいつについてですね、メールで質問をもらったのでちょろっと簡単な解説をば。
こいつはですね？CSSの擬似クラス:hoverの機能を利用したものであり、javascriptは一切使用しておりません。ですからアクティブスクリプトを無効にしている猪口才なユーザーさんでも設定の変更無しにインタラクティブな機能を利用できる、というのが魅力なんですってばよ。Gecko系でもIE系でもOperaでだって問題無く動作するしね。
以前どこかのサイト様で紹介されていた技術なのですが…参照元は忘れてしまいました。ゴメンナサイ。
兎にも角にも私の拙い解説よりも、ソースを見てもらった方がわかり易いと思いますのでここに掲載です。

■CSS
.rollover {
	position: relative
	}

.rollover a img {
	border: none
	}

.rollover a .large {
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 1px
	}

.rollover a:hover {
	background:transparent
	}

.rollover a:hover .large {
	height: auto;
	cursor:crosshair
	}

■HTML
<div class="rollover">
  <a href="#">
    <img src="小さい画像へのパス" alt="小さい画像" />
    <img src="大きい画像へのパス" alt="大きい画像" class="large" />
  </a>
</div>

>動作見本
無意味な指定（上記ソースの青文字の部分ね）が一箇所ありますが、何故かここで背景をなんでも良いから指定しておかないと、IE系では動作してくれません。理由は不明。全くの謎でございます。
この件に限らずIEの理不尽な動作に関しては悩んだら負けだと思うので深く考えずに優しい気持ちで指定してあげてください。

私がコレ、使う時は見栄え優先でサムネイル用の小さい画像と、ロールオーバー用の大きい画像とをそれぞれ用意していますが、大きい画像をCSSで縮小表示させてサムネイル画像にしても良いかもしれません。楽で。
あと、ロールオーバー時にポインタが"hand"になるのがなんか嫌だったのでcursorに"crosshair"を指定していますが、こんなもんはお好みで。
あとサイズに関して、heightしか指定していないのは私がズボラな為では決してなく、異なる縦横比の画像にも対応できる汎用性をもたせる為なんですってば！本当だよ？

本来ならハイパーリンクの為に用いるべき<a>をここでは「画像をロールオーバーさせる」、という本来の用法とは全く関係のない目的で使用しております。厳格なHTML原理主義の方から見れば目を覆いたくなるような誤用でしょうが、現在もなお圧倒的なシェアを誇る困ったちゃんIE系レンダリングエンジン搭載ブラウザの擬似クラスの実装の不備を考えれば、やむを得ない苦肉の策って事で納得してください。
この件に限らずIEの理不尽な動作に関しては悩んだら負けだと（以下略

▲ [CLAP]

トラックバック

このエントリーのトラックバックURL:
http://magokorokikaku.com/mt/mt-tb.cgi/9

▲