• ベストアンサー

画像の中に複数のリンクを貼る。

いつもお世話になっております。 今日質問したいのは件名の通り・・・。 たまに、画像の中にリンクを貼っているサイト様を見かけます。 たとえば、ドラえもんとどこでもドアとのび太君が描かれている絵があったとして、 画像全体ではなくどこでもドアをクリックすると別のページに飛ぶ・・・ といった感じのものです。 これを応用して、サイトのコンテンツをレストランのメニューのように描いて、 それぞれの部分をクリックするとそのページに飛ぶ、 といったことをしたいのですが、どのようにすればできるのでしょうか? また、そういった作業をすることによって 極端にページが重くなったり、環境によってページが閲覧できない人などが 出てくる可能性はありますか? わかりにくい文章で申し訳ありません。 よろしくお願いします。

noname#9113
noname#9113

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

  • ベストアンサー
  • hitoshit
  • ベストアンサー率33% (79/237)
回答No.4

私の場合、ホームページビルダーしか使ったことが無いので恐縮ですが、 図に示すと、このページの様な感じでしょうか? http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0227 このページの中のリンク先に http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1191 図入りのページがあります。

参考URL:
http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1191
noname#9113
質問者

お礼

私もビルダーを持っております。 なので参照ページもビルダーを使用したもので とても助かりました! ありがとうございました!

その他の回答 (3)

  • jj3desu
  • ベストアンサー率34% (291/849)
回答No.3

わたしはHPビルダーを利用しているので、ちがうソフトやご自身でhtmlでちゃんと書いていらっしゃると名称が違うかもしれませんが・・・。 イメージマップという機能を使って、画像の特定の場所を丸や四角などで囲み、そこにリンクを張ることができます。 これで、例えば人の顔の右目と左目にそれぞれ別のリンクを張るなんてことができます。 わたしはこれで隠し部屋を作って訪問者に探してもらったりしています。

noname#9113
質問者

お礼

ビルダーでもできるんですね! 知りませんでした。 私はビルダーを持っているので挑戦してみたいと思います。 ありがとうございました!

回答No.2

<map>ですね…。 >極端にページが重くなったり、環境によってページが閲覧できない人などが出てくる可能性はありますか? 特にありませんよ。 ただ、リンク先を明確的にしておかないと、訪問者はリンクのクリック場所が見つからないかも知れませんね(TAB)で次々進めば判りますが。。 とほほさんのHPを下記に紹介しておきます。

参考URL:
http://tohoho.wakusei.ne.jp/html/map.htm
noname#9113
質問者

お礼

特になしですか! 安心しました(*^-^*) ページも教えてくださってありがとうございます!

noname#7200
noname#7200
回答No.1

クリッカブルマップでできると思います。 http://tohoho.wakusei.ne.jp/html/map.htm

参考URL:
http://tohoho.wakusei.ne.jp/html/map.htm
noname#9113
質問者

お礼

ありがとうございます! 早速教えていただいたページを見に行きたいと思います!

関連するQ&A

  • 画像上にリンクを貼りたい

    みなさん、こんにちは。 今、ホームページのリニューアルを考えています。 フレームで左右のページに分けて、左ページにメニューを載せて、右ページをメインにしたいと思っています。 そこまでの工程は一応分かります。 しかし、左ページ一枚の画像の中に、「profile」や「diary」というコンテンツ名を画像ソフトで載せて、そのコンテンツ名をクリックすると、右ページに反映されるようにしたいのです。 画像ソフトでコンテンツ名を載せることも、自分でできます。 しかし、画像の中に載せてあるコンテンツ名をクリック出来るようにする方法が分かりません。 調べたのですが、ビルダーを使うと簡単だということですが、ビルダーを持っていなくて困っています。 タグなどで、画像上に載せたいくつかのコンテンツ名を、リンクできるようにする方法はありませんでしょうか? もしお分かりの方がいらしたら、教えてください。 参考になるサイト(できるだけ分かりやすいもの)を教えてくださるだけでも助かります。 どうか、よろしくお願いしますm(__)m

    • ベストアンサー
    • HTML
  • リンクを張った画像について

    HPを作っているのですが、メニューに画像を使用しています。 「gallery」という画像をクリックすると別フレームにHyperLinkでgalleryページに飛ぶ…という風にしているのですが、クリックしたメニューの「gallery」の画像が破線で囲まれてしまいます。 見栄えをよくしたいのですが、クリックした画像に破線が残らないようにすることは可能でしょうか?

    • ベストアンサー
    • HTML
  • リンクの張り方について

    トップページはすべてのメニューが表示されております。 そこからメニューをクリックすると、該当コンテンツに移動させる予定なのですが、 コンテンツは、hoge.htmlというファイルの中に、 ──────┬──────       │       │ hidari.html │ migi.html       │       │       │ というようなフレームを作成して、「migi.html」に各コンテンツを、左側に大メニュー・中メニューを表示させております。 トップページから、メニューをクリックしたときに、hoge.htmlに行きつつ、hidari.htmlとmigi.htmlの中身を指定させることは可能でしょうか? 特にソフトは使っておらず、タグを打って作成しております。

  • 画像を使ってフレーム&リンクをしたい

    こんばんは。 画像を使って、大きく開いてる白い部分にページを表示させて、イラストの顔をクリックするとメニューと言うのにしたいのですが、どのようにすれば宜しいのでしょうか? 画像をアイフレームにするやり方はわかるのですが、この画像の中にリンクを作るタグがどうしても解りません。 解りやすいサイト様などをご存知でしたら是非お教え戴きたいです。 htmlの知識が豊富な方、力を貸して戴きたいと思いますm(__)m 説明が下手で上手く話しが伝わらなかったらすみません。

    • ベストアンサー
    • HTML
  • 面白い画像

    だいぶ前に、ホームページで、面白い画像があり、そのような画像がまだ他にあるものかと教えて頂きたいです。 その画像は、ドラえもんとマリオが悪い顔になっていて、戦っている絵です。そのページも、どこにあるのか、忘れてしまいました。誰もが知っていて、それを、面白、可笑しく書いているページを教えてください。お願いします。

  • 一枚の画像に何箇所かリンクをはるにはどうしたらいいですか?

    たとえば 一枚の画像に ゾウ キリンが描かれていたとします。 その一枚の画像じたいにはなにもリンクをはらず、ゾウとキリンにリンクをはりたいんです。 ゾウの絵の部分をクリックしたら別のページにあたらしい窓で飛び、キリンの絵をクリックしたらまた別のページに新しい窓で別のリンク先に飛びたいのですが、どうやってできるんでしょう? フリーソフトでありますか? それともソフトがなくてもできますか? 初心者なので詳しく教えていただけるとうれしいです。

  • Dreamwewaver4 フレーム間のリンクについて

    Dreamweaver4でHPを作成しています。 上下二つのフレームに分けて、上はメニュー、下をコンテンツとして使っています。 例えば、メニューの中の”news”をクリックすると 上のフレームはそのままで、下のコンテンツにはフレームなしのnewsに関する情報がでます。 次に、メニューの中の”item”をクリックすると 上のフレームはそのままで、下のフレームに左右に分かれたフレームを表示させ(左はメニュー、右は画像) 左のメニューをクリックすると、右の画像が変わるページを作りたいのですが、 左のメニューをクリックすると画像が下フレームいっぱいに表示され、左のメニューが消えてしまいます。 ちなみにフォルダは分けていません。 それも関係あるのでしょうか? 分かりにくい説明ですみません。 タグ打ちとかわからないので、できればそれ以外の 方法でよろしくお願いします。

  • 画像の切り替えについてです。

    中途半端な知識で対応できず、苦しんでおります。 http://www.kanaya440.com/contents/tips/html/007.html 上のURLのサイト中段あたりにある「グローバルメニューに応用する」方法を参考に 8枚の画像をつなげた1枚の画像を使用でロールオーバーをCSSでやって出来たのですが この方法では、画像にマウスを乗せてたところが、画像からマウスが離れると最初の画像表示に戻ってしまい また、クリックした時の画像切り替え方法が記載されてないので、できれば更に、この方法に付け加える形で… 画像をクリックした時の画像切り替えするには、どうすればよいのでしょうか? イメージとしては、クリックした時も a:hover した時と同じ画像表示のままになるようにしたいのです。 ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か教えて下さい。宜しくお願いします。

  • ホームページのリンクについて

    フレームを利用したページがあるとします。 たとえば、左側にメニュー、右側にコンテンツがあるとしてコンテンツ内のリンク(他者のホームぺージへ)をクリックした場合右側だけ変わり、左のメニュー部分はそのまま残るといったページは問題ないのですか? 今日そんなページを見かけて気になりました…

  • リンクの色が突然変わらなくなっていしまいました。

    ウェブサイトを閲覧中に、通常だとリンクをクリックしたら、青色が紫色に変わるのに、クリックしても同じ色のままになりました。 ・ツールメニューのインターネットオプションの色の設定では、未表示は青、表示済みは紫になっています。 ・スタイルシートなどを使用していないサイト 例えば、gooのトップページやニュースなどのコンテンツなどで色が変わらないのです。 ・ブラウザは、インターネットエクスプローラー6で、更新もしています。やはり不具合なのでしょうか?

専門家に質問してみよう