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

Question

ホームページのhtmlソースの記述の仕方について伺います。

◆NO-1
ある画像の一部エリアを指定し、そこにリンクを貼りたいのですが、
そこをクリックすると、別ウィンドウで開くようにするには
どうソースを書いたらいいのでしょうか。

初心者なので、なるべく難しくない方法をとりたいのですが、
どう記述したら良いでしょうか。

◆NO-２
１つの画像の２か所に別々のリンクを貼るという行為を
はとれるのでしょうか。その場合、どう記述したら良いのでしょうか。

ORUKA1951 · Accepted Answer

極簡単なソースですが ★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を使いますが、出来ればユーザーに任せたほうが良いです。　　右クリックで現れるコンテキストメニューで新しいウィンドウなり、タブで開けますからね。　　^^^^^^^^^^^^^^著者が制約しないほうが良い^^^^^^^^^^^^^^^^^ ＿＿サンプル＿＿＿＿＿＿＿

＿＿

トップ
テスト１
テスト２

＿

ORUKA1951 · Answer

現在、もっとも薦められるのは、きちんと文書構造にしたがってマークアップして、スタイルシートで実装する方法です。　また、別ウィンドウで開く方法は出来れば著者から指定すべきではありません。またjavascriptを無効にしているユーザーには利用できません。・・・・・　

・・・・・　というHTMLをまず書きます。このように文書構造にしたがってマークアップします。デザインのためにHTMLは書かない。　そのうえで、スタイルシートで・・

hinananana · Answer

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

qualheart · Answer

◆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の説明を読めば分かると思いますが、一つの画像に対してクリッカブルマップは複数作成できます。タグの中に、複数のタグを記述することで、リンクを張る範囲を何個でも作れます。ご参考まで。

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

極簡単なソースですが

現在、もっとも薦められるのは、きちんと文書構造にしたがってマークアップして、スタイルシートで実装する方法です。

別ウィンドウで開くには

◆NO-1

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング