• 締切済み

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

こんばんは、CSSとクリッカブルマップがよく分かりません。 やりたいのは、CSSのbackgroundで指定されている画像にクリッカブルマップの様な効果を与えたいのです。 CSSは以下の様な物です。 .header { width : 980px !important ; height : 250px ; margin: 0 auto ; background-image: url("http://○○.png") ; } CSSの指定の画像に複数のリンクを与えたいのですが、可能でしょうか? 具体的にコードを書いていただける方からのみお返事をお願いいたします。

  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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">に画像が指定されていても、まったく同様な方法でできるはずです。リンクさえあれば・・。  頑張ってください。

gekikaraou
質問者

補足

ご回答ありがとうございます。 リンクさえあればって言うところが味噌のようですね!! 頑張って、やってみます。 ありがとうございます!

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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; }

gekikaraou
質問者

補足

ご回答ありがとうございます。 せっかく回答頂いたのですが、HTMLは <div id="header"> </div>のみなんですよね。 それにCSSで背景画像として設定してあります。 それでは無理でしょうか?

関連するQ&A

  • クリッカブルマップで画像と画像の間に隙間が出来てしまう

    現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか? それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか? 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>

    • ベストアンサー
    • HTML
  • 外部CSSファイルからのリンク色指定

    外部CSSファイルでヘッダー・フッター・左・右と4種類の枠をそれぞれ違ったリンク色に設定したいのですが、下記の記述で個々にリンク色を設定することはできますか? できるのであればどのように記載すればいいですか? body{ text-align:center; background-image: url("image/back.gif"); margin: 0 auto; } #container{ width:800px; margin:0px; text-align:left; } .header{ height: 120px; background-image: url("access/top.gif"); background-repeat: no-repeat; background-position: bottom; margin: 0px; } .main{ width:600px; height:100%; float:right; background-color: #FFFF99; padding: 10px; margin: 0px; } .side{ width:200px; float:left; background-color: #0000FF; padding: 10px; margin: 0px; text-decoration:none; color:#FFFFFF; } .footer{ font-size: 10px; } .clear{ clear:both; line-height:0; height:0; }

    • ベストアンサー
    • CSS
  • css 画像の一部分をリンクにしたいです

    画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>

    • ベストアンサー
    • CSS
  • クリッカブルマップ上のポップアップ画像

    初心者です。よろしくお願いします。 クリッカブルマップ上にあるリンク先にポインタを合わせると、ポップアップ画像が表示される仕組みを作りたいと思います。 いろいろなサイトで調べるうちに、テキストにポインタを合わせた時にポップアップ画像が表示されるコードを見つけたので、そのコードを自分なりに作り変えて試してみたのですが、うまく表示されません。 現在のhtmlコード、およびcssのコードは下記のとおりです。 <ul> <img src="img/top_map.jpg" alt="テスト画像" width="880" height="720" border="0" usemap="#Map" /> <map name="Map"><span class="test"><area shape="rect" coords="363,70,379,86" href="リンク先URL" target="_blank" /> </span> </map> </ul> ul area { position: relative; } ul area span { display: block; visibility: hidden; width: 150px; height: 150px; position: absolute; top: -100px; left: 50px; } ul area:hover { background: #FFFFFF; } ul area:hover span { visibility: visible; text-indent: -10000px; } span.yahoo { background: url(ポップアップ画像URL); } 他のサイトで、areaにはhoverという記述ができないという書き込みもありましたが、何とか実現できないものかと思っています。 どなたか、教えていただけないでしょうか?

  • 【初心者】cssの背景画像について

    cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ======================= * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ======================= <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>

    • 締切済み
    • CSS
  • CSSでDIVで挟んでいるのに背景色が出ない?

    CSSと(X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・? 確認はFirefoxとSafariでやっています。

    • ベストアンサー
    • HTML
  • CSSのレイアウト指定だけが無効に。

    CSSでデザインを始めたばかりの初心者です。 Mac環境で制作しておりますが、WIN環境に限り、レイアウト指定がうまく反映されません。(MacではIEとsafariで確認済み。) というか、レイアウトの記述部分だけ、無効になっているような印象です。 文字・リンク・imageの指定はきちんと反映されています。 現象が起きているページは下記です。 http://www.artbox-int.co.jp/seek/foragent/illust_a.html CSSの問題の部分です。 /*レイアウト*/ .head { border-width:0px; } .mainhead { width:200px; height:45px; margin-top:15px; margin-left:15px; border-width:0px; } .menu { width:250px; height:45px; margin-top:-42px; margin-left:230px; border-width:0px; } .select { margin-top:-25px; margin-left:35px; border-width:0px; } .table { margin-left:15px; margin-top:15px; width:480px; height:180px; border-color:#D9D9D9; border-width:1px; border-left-width:5px; border-style:solid; background-color:#FFFFFF; } .image { margin-top:15px; margin-left:15px; border-width:0px; } .Artistname { margin-top:-148px; margin-left:180px; width:200px; height:45px; border-width:0px; } .history { margin-top:-31px; margin-left:180px; width:280px; height:100px; border-width:0px; overflow:auto; } .other { margin-left:180px; width:280px; height:30px; border-width:0px; } どうぞよろしくご教授お願い致します。

    • ベストアンサー
    • CSS
  • CSSで、指定されていない空白が開く

    ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。

    • ベストアンサー
    • CSS
  • 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を

    背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを1024×768から1280×1024に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 - 画面サイズを変更すると位置がずれてしまうソース - @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- - HTML - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" />&nbsp;<img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- - 検索でヒットした位置指定のソース - @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- - HTMLは上記と同じ -

    • ベストアンサー
    • HTML
  • CSSのborderが実際の領域より上に表示される

    お世話になります。 CSSのborder-bottom指定のことでどうしても分からないことがあります。 div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。 本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。 実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。 ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか? いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。 よろしくお願いします。 CSS--- body { background-image:url(../images/site-body.jpg);←この画像が2500pxあります。 background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } div#contens { border-bottom:1px dotted #333333; width:800px; height:auto !important; min-height:800px; margin-left:auto; margin-right:auto; } div#footer { background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。 background-repeat:no-repeat; background-position:bottom; height:100px; } HTML--- <body> <div id="header"> ~省略~ </div> <div id="contens"> <div id="leftmenu"> ~省略~ </div> <div id="rightmenu"> ~省略~ </div> </div> <div id="footer"> ~省略~ </div> </body>