CSSで敢えてイメージマップ
CSSでイメージマップを実現する
最近使用機会もだいぶ減少してきた「イメージマップ」別名「クリッカブルマップ」。一般的には画像をまず配置して、areaタグで位置を指定してリンクなんかを設定する。今回はそれをCSSでやっちまおうという試み。
こんな人におすすめ。
・areaタグではなく、もっとソースに意味を持たせたい人
・areaとかで基点になる数値が入ってややこしいんじゃーという人
・とにかくソースをきれいにしたい人。再利用を考えている人。
・基準点を設定するのに手動だとすげーー時間かかるじゃん！かといってソフトに頼って制作するのなんて邪道だ！という頑固な方。
弱点
・circle(円形)やpoly(多角形)には対応できません。但し、円形を強引に四角で括っても構わない場合はいけます。
・cssの絶対配置が分からないとできません。
つーことで、サンプルページはこちら。
>>Redline Magezine：：敢えてCSSでイメージマップを実現するサンプル
元ネタ：：CSS Image Maps - Flickr-like Technique?
これができるということはだよ、あんなこととかこんなこととか、自由自在にできるんじゃないか、と。便利だ。
<< cssでポップアップネタ | CSSでunderlineをカスタム >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/84
コメント (5)
はじめまして。みやと申します（♀）。
貴兄のサイト、とても勉強になり、ありがたいです。
実は、私事なのですが、ここ3年ほど子育てに専念しとりまして、最近いざ社会復帰!と、知人の会社のHP制作を頼まれました。
で、まぁ技術的に原始人状態なので、勉強としてここはひとつできる限りCSSを使用しよう！ということを考えたのですが（勝手にですが）、イメージマップをcssで作成したものがうまく動かないのです（少なくともIE7）。
で、こちらのサイトとか、元ネタさんサイトとかもみまして、作成したのですが、ページがセンターあわせだとうまくいかないみたいなんです（ちなみに制作しているサイトはセンターあわせです）。
左あわせだと大丈夫なのですが…。センターあわせだとどうにかなる方法ってあったら教えていただけたらうれしいです。
でも、お忙しいでしょうから、無理なさらないでください。
最悪、普通にイメージマップにしようと思います。
投稿者: みや | 2008年03月11日 19:43
みやさん、コメントありがとうございます。
えっとですね、ソースを拝見してないので何とも言えない部分もあるんですが、左合わせだとうまくいってるとの事ですので、今は「基準点」がない状態(デフォルトの状態)なのではないかと思います。(合わせた位置がページの左上基準になってませんか?)
絶対配置の基準となる位置をちゃんと作っておけばブラウザはIEでもFxでもセンター合わせてでイメージマップできると思いますよん。そのイメージマップにさせたい部分の「親」に対してposition:relative;を指定して基準にしてからabsoluteで位置合わせすればOKです。
左合わせで大丈夫ならセンター寄せ対応にするのはその記述だけで基本的に大丈夫だと思います。
投稿者: Red | 2008年03月12日 00:21
ありがとうございます！！！
これからいじってみます！！！！
大変助かりました！！！！
これからもサイト拝見させていただきます！
投稿者: みや | 2008年03月12日 05:18
たびたびすみません！
できました(感涙)！
親にrelativeを指定しただけで動きましたー。
感謝いたします。これからも勉強にはげみます(汗)
本当にありがとうございました。
投稿者: みや | 2008年03月12日 05:52
>みやさん
お役に立ててよかったですー。
これからも頑張ってください(n' ∀ ') η
投稿者: Red | 2008年03月12日 11:28