みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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

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

CSSは以下の様な物です。

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

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

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

投稿日時 - 2012-11-23 03:02:13

QNo.7811286

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

><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-23 18:38:37

補足

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

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

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

ありがとうございます!

投稿日時 - 2012-11-28 17:15:32

ANo.1

たとえば、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;
}

投稿日時 - 2012-11-23 09:06:17

補足

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

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

<div id="header">

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

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



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

投稿日時 - 2012-11-23 17:12:31

あなたにオススメの質問