イメージマップのCSS なぜそうなるかは知らない。

見る人が見たらわかりますが、今回作った高槻土屋工務店さんのホームページ、ご要望のデザインどおりに作って欲しいと。　こんなゴチャゴチャしたのCSSで組めないですし、これはついに私がイメージマップを書く日がやってきたなと思いました。　

昔、自分のサイトを評価してくれる英語のサービスかなんかありまして、「とてもよくできていますが、画像が多いので表示が遅くなっているためイメージマップで書くことをオススメします」とメールが来てですねぇ。　イメージマップでいつかやりたいと思っていたのですが、その時は、CSSも今ほど知らなかったので、難しく思えて、すごく辛かったのを覚えている。今回、トラウマを解消すべく、やってみると結構便利かもと思えるようになりました。　が、その書き方のルールはわかるが、なぜそうなるかはまったく理解できません。


イメージマップについては、私はこの記事を参考にしました。　←こちらをもとにした日本語の情報もこちら　でも、最初これ読んでもよくわからず。
だいたい、座標をどうやって決めるのかがわからない。これを読みなんだペイント出してきたらいいんだとわかってからやっと作れるなと思ったという…。　そんな手探りな方のために記録を残しておきます。　なんせマインドマップの記事ばかり検索に出て来てマイりましたよ。

• 画像を準備する

作り方は上記の場合、上が見せるもので、下にhover で表示させるものを正確に上下でくっつけます。（左右でもよろしい）

• 最初に表示される画像をBackgroundでCSSで指定する。サイズは当然上の部分だけ
• リンクの場所をひとつひとつ指定していく

この例の場合はdl dt dd の組み合わせで指定した。　dlが全体のバック画像でposition: relative;
dt を不可視にして、　position: absolute; font-size: 65%; display: none; 　
　　クリックさせる場所ごとにid をふったddを指定し、　　position: absolute。　top 　left で　左端の00からの位置を指定する
dd の　a でサイズを指定し、 dd のhover でバック画像を指定して、なぜか　だいたいの場合、表示する座標の数字にマイナスをつけた場所でだいたいいける…。（理由不明）

↑まったく不思議であるが、とにかくこれでできる。

---

例：左隅の台所のところなら
dd#kitchenDef　{ top: 25px; left: 45px; } 　　
dd#kitchenDef a{ position: absolute; width: 189px; height: 47px; text-decoration: none; } 　　dd#kitchenDef a span{ display: none; } 　　
dd#kitchenDef a:hover{ position: absolute; background: transparent url(../images/toppage_photo/refomimagemap.jpg) -40px -241px no-repeat; top: -9px; left: -5px; } 　　dd#kitchenDef a:hover span｛display: block; text-indent: 0; color: #000; background-color: #cfeef5; font-weight: bold; position: absolute; top:2px; left:190px; border: 1px solid #BCBCBC; bottom: 100%; margin: 0px; padding: 5px; width:187px;height:32px;｝

 このようにしてフォバーすると右にニョキっと説明が出て色が変わるということが実現されている。 ：：：

ペイントで座標見ながら適当に…。規則性がまったくわからず、探偵のようにこのくらいかなと、具合みながらやっていったという感じ。

記録しておかないと二度と思い出せない…。

でも今回、ありとあらゆるところをこれで解決したので、食べず嫌いだったイメージマップを攻略したことが非常に嬉しかった。

ちなみに、CSSに詳しい人ならわかると思うけど、この右に出るのが右端のコラムの上になるようにするためには、まず右端のコラムを一番先に書かないといけない… ここでツボに嵌った。

まず　contents　で下の部分をつつむのだが、 #contents{width:1010px;position:relative;margin:0 auto;} 

さらに　content-wrapper　というので右コラムと　左コラムを包み込むものを作っておき
#content-wrapper{ width:1010px; margin: 0 auto; overflow: hidden; }
#content-wrapper:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }

 そして右コラム #rightcolumn{position:absolute;top:4px;left:758px;width:240px;height:1136px;background-image:url('../images/right.png');background-repeat:no-repeat;}

左コラム
#leftcolumn{position:absolute;top:0px;left:6px;width:750px;height:1136px;padding-top:6px;}

と書いている。　

素直に上の場合　contents にheight を指定したらいいけど、他のページがコラム揃えしているので、cssが違うのめんどくさいためにこのように書いています。



そうです。このホームページはすごいことに、例えばこのページなどは 記事が左側にどんどん増えると左コラムが伸びていくように作る。　これには２つのコラムを揃えるワザが必要であった。　
左右でそろえるコラムのワザはこちらを参考にしてください。

ちなみにこのサイト、従業員さんの記録がしやすくなるという配慮のため、ブログ数8つ、スペシャルスキンページ6つという…。

大サイトなのであった。　　疲れた。

---

お問合せフォーム

お名前 :

Email: (必須)

メッセージ: (必須)

｢今日も勉強しました｣の 「イメージマップのCSS　なぜそうなるかは知らない。」について…

約束します！迷惑かけません

　約束しないと、送信できません。再度の場合はリロードが必要です。

Tweet