TABLEでのリンクについて

このQ&Aのポイント
  • TABLEでのリンクの設定方法や画像の重ね方についての疑問について解説します。
  • TABLEの背景画像からのリンク設定について、可能性と間違いの可能性について解説します。
  • TABLE内の画像を重ねる方法とリンク設定に関して、問題点とアドバイスを紹介します。
回答を見る
  • ベストアンサー

TABLEでのリンクについて

画像の中の指定した部分から違うページへリンクさせたくて <img src="image/ie.gif" width="550" height="285" border=0 usemap="#map1"> と入力してその後に <map name="map1"> <area shape="rect" coords="249,169,295,220" href="link.htm"> </map> としてリンクさせました。 その後に画像の上に違う画像を重ねたくて最初の画像をTABLEの背景にしようと思って <table background="image/ie.gif" width="550" height="285" border=0 usemap="#mapie"> と直しました。 そうすると画像を重ねる事はできたのですが、リンクができなくなってしまいました。 TABLEの背景画像からmapを使ってリンクさせる事はできないんでしょうか?それとも何か間違えていますか? どなたかアドバイスをお願いします。

  • 1020
  • お礼率40% (30/75)
  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • Haizy
  • ベストアンサー率40% (404/988)
回答No.3

こんにちは。 そのままでは、できそうに無いので、ちょっとしたアドバイスを・・・ まず、1ドット*1ドットで、透明化したGIFをご用意ください。 そして、そのGIFファイルを、 width、htightを指定しツリーの画像の外側に読み込んでください。 ここに、MAPをつけます。 <img src="image/dot.gif" width="550" height="55" border=0 usemap="#map1"> <map name="map1"> <area shape="rect" coords="249,20,295,55" href="link.htm"> ↑ 上の隙間に貼り付ける。これで隙間を埋めれば、多少、ごまかせますよ(^^; <A href="link.htm"><img src="image/ie.gif" width="550" height="285" border=0 usemap="#map1"> </A> つまり、ツリーの画面の外を透明な画像で囲んでしまうわけです。 これなら、少々手間ですがIMGの画像なので、MAP指定が可能になります。 案外、応用がきくので憶えておくと便利です。 参考になれば。 でわ!

1020
質問者

お礼

どうもありがとうございました! Haizyさんが教えてくれた方法を参考に、ちょっと違うやり方になりましたが 思い通りできました。 どうしようか悩んでいたので本当に助かりました。 ありがとうございました。

その他の回答 (2)

  • UKY
  • ベストアンサー率50% (604/1207)
回答No.2

tableの背景画像にmapを使ってリンクを指定することは出来ないと思います。 tableの背景画像と、上に重なっている画像が同じ大きさなら、上に重なって いる画像にmapを指定して、あたかも背景にmapが指定されているように 見せかけることは出来ますが…

1020
質問者

お礼

困ったことに2つの画像の大きさは全然違うんです。 TABLEの背景画像にするとやっぱりできないんですね。 何か他の方法を考えてみようと思います。 どうもありがとうございました。

  • sinx
  • ベストアンサー率29% (14/47)
回答No.1

確かusemap属性はIMG意外には使えません。 画像自体を重ねたものにしてはどうでしょうか。 (今ある2枚を1枚の画像にする。)

1020
質問者

お礼

やっぱりできないんですか・・・。 本当は画像を重ねて1枚にできればいいのですが、その重ねたい画像がクリスマスツリーのイルミネーションがピカピカ光る画像なので1つにしてしまうとイルミネーションが光らなくなってしまうんです。

関連するQ&A

  • 背景画像にクリッカブルマップでリンクを飛ばす方法

    背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが 上手く設定できません。 どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか? ■CSSで書いているのは .bodytitle { background-image: url('http://**************/title.jpg' width="750" height="269" border="0" usemap="#maintop"); } ■HTMLのbodyの中に書いているのは <map name="maintop"> <area shape="rect" coords="12,10,280,80" href="http://******/" target="_blank"> <area shape="rect" coords="510,8,740,71" href="http://******/" target="_blank"> </map> お手間おかけしますがどうぞよろしくお願い致します。

  • テーブル内の行の間に隙間ができてしまいます

    いつもお世話になります。 dreamweaverCS2でホームページを作っています。 2行1列のテーブル内のセルそれぞれに画像を配置しているのですが、 IE6で表示すると、行(画像)と行(画像)の間にスペース(白い)ができてしまい、 画像同士がくっつきません。 上の行にはイメージマップを使用しています。 なんとか画像をくっつけた状態で表示したいのですが、どこに問題があるでしょうか。 画像の大きさは上の行のものが742*69 下のものが742*18です。 ちなみにHTMLは下記のようになります。 また、Netscape7.1やsafariではくっついた状態で表示できます。 困っています。よろしくお願いします。 *****以下HTML************ <table border="0" cellpadding="0" cellspacing="0" width="742" > <tr> <td width="742" > <img src="images/header1_1.gif" alt="" width="742" border="0" usemap="#hd1_Map" vspace="0"/> <map name="hd1_Map"><area shape="rect" coords="260,50,366,65" href="index.html" alt="Homeへ" /> <area shape="rect" coords="367,50,475,65" href="about.html" alt="***について" /> <area shape="rect" coords="476,50,590,65" href="members.html" alt="****一覧" /> <area shape="rect" coords="591,50,700,65" href="syukketsu.html" alt="***" /> </map></td> </tr> <tr> <td><img src="images/subnavibar1.gif" alt="" width="742" border="0" vspace="0" /></td> </tr> </table> ****ここまで****

  • ブラウザに対応させるには?

    はじめまして  現在xoopsでホームページ作成してるんですけど ブロック配置を「中央ブロック中央」で設定し htmlでトップを作ってブラウザで確認したのですけどfirefoxでみたときにイメージマップで作ったリンクがリンクされてないのです。 一応、私もいろいろ思いつくことはやってみたのですけど・・・どうしても出来なかったので質問したしだいです。 これが問題のタグなんですが  <table> <td align="center" width="" height=""> <img src="" width="" height="" border="" usemap="#Map"> <map name="Map"> <area shape="rect" coords="6,5,54,56" href=""> <area shape="rect" coords="71,6,121,55" href=""> <area shape="rect" coords="135,5,185,55" href=""> <area shape="rect" coords="198,5,248,54" href=""> </map> の部分がfirefoxではリンクされない状態で画像が表示した状態になるところです。  ご回答よろしくお願いします。

  • background-imageが表示されない

    ヘッダーの部分の背景画像が表示されません。 CSS #header { height: auto; display:block; margin:0px;padding:0px;width:100%; background-image: url(../images/mainback.png); } HTML <div id="header"> <div><img src="images/topbar2.gif" alt="" usemap="#map2" border="0" /></div> <map name="map2"> <area href="s.html" alt=""shape="rect"coords="394,57,495,68" /> <area href="t.html" alt=""shape="rect"coords="510,57,605,68"/></map> <div><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> </div> 上記のようにヘッダー画像の下に背景画像をつけたいのですが、画像がある場合背景画像は重ならないんでしょうか?

    • ベストアンサー
    • HTML
  • クリッカブルマップがきかない!?

    html初心者です。 地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか??ソースは下記にある通りです。 なにか決定的にタグが抜けているんでしょうか?? 皆様、初心者な私にどうか教えてください。 よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>

    • ベストアンサー
    • HTML
  • クリックしてリンク先に移動する地図をwebに掲載しましたが

    ホームページに地図の画像を掲載して、 その地図にいくつかのクリックできるポイントを設定し、 それぞれリンク先に移動するようにしました。 IEではキレイに地図の画像が表示できているのですが、 FireFoxとか、Netscapeでは地図に青い外枠が表示されます。 赤を基調にしたサイトなので不自然な感じがして困っています。 どのようにこれを回避したらよいのでしょうか。 具体的に下記付け加えるもの等ございましたら教えてください。 よろしくお願いします。 <MAP NAME=map1> <AREA SHAPE=rect COORDS="112,2,196,28" HREF="room1.htm"> <AREA SHAPE=rect COORDS="213,3,298,28" HREF="room2.htm"> <AREA SHAPE=rect COORDS="310,2,399,28" HREF="room3.htm"> <AREA SHAPE=rect COORDS="413,2,495,28" HREF="room4.htm"> <AREA SHAPE=rect COORDS="513,1,594,27" HREF="room5.htm"> <AREA SHAPE=rect COORDS="614,2,701,28" HREF="room6.htm"> </MAP><IMG USEMAP="#map1" SRC="worldmap.gif" WIDTH=702 HEIGHT=29 ALIGN=bottom>

    • ベストアンサー
    • CSS
  • クリッカブルマップのリンクが‥

    クリッカブルマップでリンクさせたくて、記述いたしましたが、リンクが有効になっていません。 ブラウザ上では画像表示のままでハイパーリンクになっておらず、目的のページへ行けない状態です。 これは何が原因でしょうか。 以下、htmlの記述です。みなさま、どうかご教授のほどお願いします。 <img src="./images/menu1.jpg" usemap="#linkmap" border="0" height="81" width="500"> <map name="linkmap"> <area shape="rect" coords="x15,y22,x88,y53" href="$home" alt="ホーム"> <area shape=rect coords="x88,y22,x203,y53" HREF="http://"> <area shape=rect coords="x201,y22,x310,y53" HREF="./index.cgi?mode=top"> <area shape=rect coords="x309,y22,x418,y53" HREF="http://"> </map>

  • イメージマップ内での画像の変更【HTML・CSS・Java】

    <img src="imagemaptest.bmp" usemap="#imagemaptest" border="0"> <map name="imagemaptest"> <area shape="rect" coords="152,167,359,451" href="***.html"> このようなタグでイメージマップを作成します。 そしてcoords="152,167,359,451"で指定したリンクにマウスオンした時に画像を変更する事は可能でしょうか?簡単に言うと画像の中のリンクにマウスを当てると指定した部分だけ画像が変更される方法です。 また、 background="test.jpg"でTABLE内に背景を指定し、その背景にリンクを張ることはかのうでしょうか? おわかりになる方、お教え下さい(・・*)JavaでもCSSでもかまいません☆

    • ベストアンサー
    • HTML
  • クリッカブルマップの下に隙間ができる

    クリッカブルマップ画像をテーブルに入れて その下にテーブルを入れるとその間に隙間が出来てしまいます。 下のHTMLですが、どこが間違っているのか教えて下さい。 <img src="img/index/h_01.jpg" width="700" height="90" border="0" usemap="#Map"><map name="Map"> <area shape="rect" coords="8,15,189,74" href="index.html"> </map> 困っているのでよろしくお願いします! 足りない部分があれば追加して記入しますのでご指摘ください。

  • mapを使用してリンク後、戻った時に画像にareaの枠が付いてしまう

    下記のようにmapを指定して、別ウィンドウでページを開きます。 すると、ページを閉じて戻った時、画像上に丸くareaの枠線が付いてしまいます。 どのような指定をしたら消せるのでしょうか。 <img src="img/image.gif" width="175" height="152" vspace="2" border="0" usemap="#Map"> <map name="Map"> <area shape="circle" coords="62,91,10" href="index.html#info" target="_blank"> </map>

    • ベストアンサー
    • HTML

専門家に質問してみよう