前の記事 ≪:MySQLデータのバックアップ方法
次の記事 ≫:CSSでセクシーなボタン作成

CSSだけでイメージマップを作る有用サンプル

2007年06月05日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
CSS Image Maps - Flickr-like Technique?
Below is a sample image map that's built entirely using CSS and XHTML.

CSSだけでイメージマップを作る有用サンプル。
画像の特定部分にカーソルを合わせると、説明を画像上に表示できるCSSとXHTMLサンプルが公開されていました。
JavaScript を一切使っておらず、CSSだけで実現されているところがすごいですね。



JavaScript が要らず、次のような綺麗なHTMLで実現できるところも嬉しいですね。
実装も簡単そうです。

<dl id="officeMap">
<dt id="monitor">1. Monitor</dt>
<dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd>
<dt id="phone">2. Phone</dt>
<dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
<dt id="case">3. PC Case</dt>
<dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
<dt id="notebook">4. IBM ThinkPad</dt>
<dd id="notebookDef"><a href="#"><span>Here's my Linux notebook. Some crazy coding going on.</span></a></dd>
<dt id="floppy">5. External Floppy Drive</dt>
<dd id="floppyDef"><a href="#"><span>Floppy Drive. Ancient... I know!</span></a></dd>
</dl>

知っておけば絶対に使えるテクニックだと思うので覚えておきましょう。

関連の記事検索:CSS, Webデザイン, チュートリアル, Web制作, イメージマップ, HTML
スポンサード リンク

By.KJ : 2007年06月05日 07:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)