CSSでクリッカブルマップもどき + Lightbox

クリッカブルマップとは

普通に画像からリンクしようとすると、1枚の画像からリンク先は1箇所です。
しかし、クリッカブルマップを使用すると、配置した1枚の画像の中に複数のリンク先を設定できます。

クリッカブルマップ　【clickable map】
　Webブラウザの持つ機能の一つ。画像の中に色々なリンク先を設定しておき、クリックした位置に応じて定められたリンク先に移動する機能。また、その機能を持った画像のこと。1枚の画像の中に複数のリンク先を設定できるため、地図の画像を利用したWebサイトや、Webページの上部や左部に配置されるメニューなどで利用される。

あまり新しい技術ではありません。XHTML + CSS でコーディングしてるとなかなか使いませんね。
しかし、クリッカブルマップと似たようなことがやりたい場合があります。
クリッカブルマップすればいいじゃないかと思うんですが、そこであえてCSSで『もどぎ』をやってみることにします

ただ、これだけだと、芸がないので Lightbox を組み合わせてみました。

HTMLソース

<div id="clickable">
<p><img src="img/bg_sample.gif" alt="画像" /></p>
<dl>
<dt>ポイントその1</dt>
<dd><a href="img/lightbox/photo01.jpg" rel="lightbox" title="ポイントその1" class="photo01">ポイントその1</a></dd>
<dt>ポイントその2</dt>
<dd><a href="img/lightbox/photo02.jpg" rel="lightbox" title="ポイントその2" class="photo02">ポイントその2</a></dd>
</dl>
<!-- END clickable --></div>

CSSソースコード

#clickable {
	width: 500px;
	height: 300px;
	background: url(img/bg_sample.gif) no-repeat;
	position: relative;
	text-indent: -9999px;
}
#clickable img {
	display: none;
}
#clickable a {
	overflow: hidden;
}
#clickable dt {
	display: none;
}
#clickable dd a.photo01 {
	position: absolute;
	top: 150px;
	left: 50px;
	display: block;
	width: 100px;
	height: 100px;
}
#clickable dd a.photo02 {
	position: absolute;
	top: 50px;
	left: 200px;
	display: block;
	width: 100px;
	height: 100px;
}

margin、paddingは事前に0になってます。

そして作った後にこちらの存在を知る…。
CSSで敢えてイメージマップ – RedLine Magazine

Lightbox用CSSとJavaScriptを読み込まなくていいぶんこちらのほうがラクかもしれません。お好きなほうをお好みでどうぞ。