ベストアンサー

html記述：画像一部エリアをリンク

2011/09/14 15:36

ホームページのhtmlソースの記述の仕方について伺います。 ◆NO-1 ある画像の一部エリアを指定し、そこにリンクを貼りたいのですが、そこをクリックすると、別ウィンドウで開くようにするにはどうソースを書いたらいいのでしょうか。初心者なので、なるべく難しくない方法をとりたいのですが、どう記述したら良いでしょうか。 ◆NO-２１つの画像の２か所に別々のリンクを貼るという行為をはとれるのでしょうか。その場合、どう記述したら良いのでしょうか。

hayaken73
お礼率97% (156/160)

HTML
回答数4
ありがとう数6

みんなの回答 （4）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/14 20:25 回答No.4

極簡単なソースですが ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み＿はタブに戻してください。スタイルシート内のurl()内には、画像(400px×300px程度)の適当な画像へのパスを書いてください。補足)画像の位置をクリックすると少しずらすとかも出来ます。調べてください。補足)別ページが開く方法はjavascriptを使いますが、出来ればユーザーに任せたほうが良いです。　　右クリックで現れるコンテキストメニューで新しいウィンドウなり、タブで開けますからね。　　^^^^^^^^^^^^^^著者が制約しないほうが良い^^^^^^^^^^^^^^^^^ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="nav"> ＿＿<ol> ＿＿＿<li class="goTop"><a href="./index.html">トップ</a></li> ＿＿＿<li class="goTest1"><a href="./test1.html">テスト１</a></li> ＿＿＿<li class="goTest2"><a href="./test2.html">テスト２</a></li> ＿＿</ol> ＿</div> </body> </html>

質問者

お礼 2011/09/14 20:48

こんなにご丁寧にご説明いただき、大変恐縮です。私もまだまだ勉強が足りないようで、もっと精進せねばと思いました。本当にありがとうございました。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/14 18:43 回答No.3

現在、もっとも薦められるのは、きちんと文書構造にしたがってマークアップして、スタイルシートで実装する方法です。　また、別ウィンドウで開く方法は出来れば著者から指定すべきではありません。またjavascriptを無効にしているユーザーには利用できません。 <body> ・・・・・　<div class="nav"> 　　<ol> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　　<li><a href=""></a></li> 　　</ol> 　</div> ・・・・・　というHTMLをまず書きます。このように文書構造にしたがってマークアップします。デザインのためにHTMLは書かない。　そのうえで、スタイルシートで・・

質問者

お礼 2011/09/14 20:33

＞別ウィンドウで開く方法は出来れば著者から指定すべきではありません。またjavascriptを無効にし＞ているユーザーには利用できません。なるほど、そういう考えがあるんですね。参考になります。色々ご丁寧にありがとうございます。

hinananana
ベストアンサー率69% (16/23)

2011/09/14 18:22 回答No.2

別ウィンドウで開くには target="_blank" を使う方法もあります。質問の答えには若干違うような気がしますが <a href="#" target="_blank">別ウィンドウで開く</a> 二つ目の質問は1さんのでやると良いでしょう。少し書くのが面倒ですが、やってみると面白いですよ！参考URLはmapタグの説明です。

参考URL：: http://www.htmq.com/html/map.shtml

質問者

お礼 2011/09/14 20:34

target="_blank" すごくシンプルで、これいいですね。ありがとうございます。

qualheart
ベストアンサー率41% (1451/3486)

2011/09/14 15:50 回答No.1

◆NO-1 クリッカブルマップというタグを使えばできます。クリッカブルマップを簡単に説明すると、画像に対してリンクを張る範囲をピクセル値で指定し（左上の位置、横幅、縦幅を指定します）、リンク先を設定する機能のことです。クリッカブルマップについては以下のサイトを参考にしてみてください。 http://www.tohoho-web.com/html/map.htm タグの入れ方は上記のURLにある説明を読めば恐らく理解できると思いますが、実際HTMLを作るときに画像のどの位置にどれくらいの幅と高さのクリッカブルマップを作るかを目視で判断するのは難しいです。画像を見ただけでそこが何ピクセルか分かるわけないですもんね。なので、クリッカブルマップを作る場合は、以下のようなフリーツールを使うのが一番良いです。 http://www.forest.impress.co.jp/article/2003/09/12/okiniiri.html 自動的にクリッカブルマップのソースを作ってくれます。それをHTMLにペーストすればOKです。 ◆NO-２可能です。上記URLの説明を読めば分かると思いますが、一つの画像に対してクリッカブルマップは複数作成できます。 <map>タグの中に、複数の<area>タグを記述することで、リンクを張る範囲を何個でも作れます。ご参考まで。

質問者