CSS内に指定されている画像にクリッカブルマップを

こんばんは、CSSとクリッカブルマップがよく分かりません。

やりたいのは、CSSのbackgroundで指定されている画像にクリッカブルマップの様な効果を与えたいのです。

CSSは以下の様な物です。

.header
{
width : 980px !important ;
height : 250px ;
margin: 0 auto ;
background-image: url("http://○○.png") ;
}

CSSの指定の画像に複数のリンクを与えたいのですが、可能でしょうか？

具体的にコードを書いていただける方からのみお返事をお願いいたします。

No.1 回答者： ORUKA1951 回答日時： 2012/11/23 09:06

たとえば、HTMLが、header内のナビゲーションリストを示すものだとしたら、次のようにマークアップされていると思います。

<div class="header">
　<h1>・・・・</h1>
　<div class="nav">
　　<h2>サイトマップ</h2>
　　<ol>
　　　<li><a href="/">トップ</a></li>
　　　<li><a href="/books">著書</a></li>
　　　<li><a href="/profile">プロフィール</a></li>
　　　<li><a href="/contact">連絡</a></li>
　　</ol>
　</div>
</div>
・・・・HTML5でしたら
<header>
　<h1>・・・・</h1>
　<nav>
　　<h2>サイトマップ</h2>
　　<ol>
　　　<li><a href="/">トップ</a></li>
　　　<li><a href="/books">著書</a></li>
　　　<li><a href="/profile">プロフィール</a></li>
　　　<li><a href="/contact">連絡</a></li>
　　</ol>
　</nav>
</header>

HTML4.01のHTMLに対してのスタイルシートなら
仕組み自体はとても簡単です。面倒くさいだけ
★わかりやすいように点線で位置を示しています。
★原理的に四角な領域しか指定できません。

div.header div.nav h2{dispaly:none;}
div.header div.nav ol,div.header div.nav ol li{dispaly:block;list-style-type:none;margin:0;padding:0;}
div.header div.nav ol{
width:980px;height:250px;
margin: 0 auto ;
background:gray url("./images/00.png");
position:relative;
}
div.header div.nav ol li a{
display:block;
position:absolute;
background-image:url("./images/00.png");
background-color:yellow;
width:160px;height:60px;
border:dotted 1px red;
}
div.header div.nav ol li a[href="/"]{
top:10px;left:40px;
background-position:-40px -10px;
}
div.header div.nav ol li a[href="/books"]{
top:30px;left:200px;
background-position:-200px -30px;
}
div.header div.nav ol li a[href="/profile"]{
top:80px;left:340px;
background-position:-340px -80px;
}
div.header div.nav ol li a[href="/contact"]{
top:120px;left:500px;
background-position:-500px -120px;
width:200px;height:80px;
}

この回答への補足

ご回答ありがとうございます。

せっかく回答頂いたのですが、HTMLは

<div id="header">

</div>のみなんですよね。

それにCSSで背景画像として設定してあります。



それでは無理でしょうか？

補足日時：2012/11/23 17:12

No.2 回答者： ORUKA1951 回答日時： 2012/11/23 18:38

＞<div id="header"></div>のみなんですよね。

　それだけでは無理です。
　クリッカブルマップにしようが、CSSでデザインしようが、リンクは必須です。
画像の上に【リンクを】配置する方法は、前提としてリンクが必要です。
　　　　　　　^^^^^^^^^^
それがたとえ、
<div id="header">
　<ol>
　　<li><a href=""></a></li>
であろうが、
<div id="header">
　<p><img src="" width="" height="" alt=""></p>
　<ol>
　　<li><a href=""></a></li>
であろうが、絶対に必要なのはリンクです。

先刻の回答では、クリックしたときにボタンの背景をずらすことを想定して記述しましたが、それがなければ
div.header div.nav h2{dispaly:none;}
div.header div.nav ol,div.header div.nav ol li{dispaly:block;list-style-type:none;margin:0;padding:0;}
div.header div.nav ol{
width:980px;height:250px;
margin: 0 auto ;
background:gray url("./images/00.png");
position:relative;
}
div.header div.nav ol li a{
display:block;
position:absolute;
width:160px;height:60px;
border:dotted 1px red;
}
div.header div.nav ol li a[href="/"]{
top:10px;left:40px;
}
div.header div.nav ol li a[href="/books"]{
top:30px;left:200px;
}
div.header div.nav ol li a[href="/profile"]{
top:80px;left:340px;
}
div.header div.nav ol li a[href="/contact"]{
top:120px;left:500px;
width:200px;height:80px;
}
というシンプルなものになります。
　折角ソースを示ししたのですから、単にコピペではなく、その意味をしっかり理解してください。
　<div id="header">に画像が指定されていても、まったく同様な方法でできるはずです。リンクさえあれば・・。
　頑張ってください。

この回答への補足

ご回答ありがとうございます。

リンクさえあればって言うところが味噌のようですね！！

頑張って、やってみます。

ありがとうございます！

補足日時：2012/11/28 17:15