- ベストアンサー
html記述:画像一部エリアをリンク
- みんなの回答 (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"> <!-- div.nav{background-image:url();width:400px;height:300px;position:relative;} div.nav ol,div.nav ol li{display:block;list-style:none;text-align:center;} div.nav ol li{width:100px;height:50px;position:absolute;line-height:50px;} div.nav ol li a{display:block;width:100%;height:100%;border:outset 5px gray;text-decoration:none;} div.nav ol li.goTop{top:50px; left:100px;} div.nav ol li.goTest1{top:150px; left:200px;} div.nav ol li.goTest2{top:200px; left:350px;} div.nav ol li a:hover{border-color:red;} div.nav ol li a:active{border-style:inset;} --> _</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">テスト1</a></li> ___<li class="goTest2"><a href="./test2.html">テスト2</a></li> __</ol> _</div> </body> </html>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
現在、もっとも薦められるのは、きちんと文書構造にしたがってマークアップして、スタイルシートで実装する方法です。 また、別ウィンドウで開く方法は出来れば著者から指定すべきではありません。また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は書かない。 そのうえで、スタイルシートで・・
お礼
>別ウィンドウで開く方法は出来れば著者から指定すべきではありません。またjavascriptを無効にし >ているユーザーには利用できません。 なるほど、そういう考えがあるんですね。参考になります。 色々ご丁寧にありがとうございます。
- hinananana
- ベストアンサー率69% (16/23)
別ウィンドウで開くには target="_blank" を使う方法もあります。 質問の答えには若干違うような気がしますが <a href="#" target="_blank">別ウィンドウで開く</a> 二つ目の質問は1さんのでやると良いでしょう。 少し書くのが面倒ですが、やってみると面白いですよ! 参考URLはmapタグの説明です。
お礼
target="_blank" すごくシンプルで、これいいですね。 ありがとうございます。
- qualheart
- ベストアンサー率41% (1451/3486)
◆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-2 可能です。上記URLの説明を読めば分かると思いますが、一つの画像に対してクリッカブルマップは複数作成できます。 <map>タグの中に、複数の<area>タグを記述することで、リンクを張る範囲を何個でも作れます。 ご参考まで。
お礼
色々丁寧なご説明助かります。 ありがとうございます。 ところで 別ウィンドウで開くようにするには どうソースを書いたらいいのかお分かりで あれば、合わせて教えていただけますか。 以下2つを満たすようにソースをどう記述すればいいのかが わかりません。 ◆クリッカブルマップ ◆それを別ウィンドウで開く
関連するQ&A
- 画像リンクについて
ホームページの画像リンクは基本、その画像全体をリンク化したものですが、この画像の一部をリンク化することは可能なんでしょうか?もし可能ならば、ソースをどうしたらいいのか教えてください。
- 締切済み
- その他([技術者向] コンピューター)
- 画像の一部をリンク
今ホームページを作っているのですが、 画像の一部をリンクさせるにはどうしたら良い のでしょうか?? 簡単にできるようなソフトなどありますか?? よろしくお願いします。
- ベストアンサー
- その他(インターネット・Webサービス)
- 画像の一部からリンクを貼りたい
DreamWeaverCS4を使用して、 画像の一部を指定してリンクを貼りたいのですが、どのような操作でできますか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 画像の一部からリンク先へ
HPビルダー6.5を使って作成しています。 画像の一部分っをクリックするとリンク先に飛ぶ、 というようなリンクを張ることが出来ますでしょうか? 例えば、メニューを一つの画像で作って、それぞれのメニュー項目の部分をクリックするとリンク先へ飛ぶ、というような・・・
- ベストアンサー
- ホームページ作成ソフト
- 1つの画像に複数のリンクを貼る時…
ホームページビルダー6.5でホームページを作成しています。 1つの画像に複数のリンクを貼って、リンク先のウインドウを開くとき ウインドウの大きさを画像の大きさで開きたいのです。 あと、タイトルバーのすぐ下に画像が表示される(ツール、アドレスバー等は 表示させたくない)ようにしたいのです。 ホームページビルダーのマニュアルには載っていないし、かれこれ2日間悩んでます。 説明が足りなければ補足しますので助けて下さい。よろしくお願いします。 <MAP name="A"> <AREA href="('リンク先.htm','scrollbar=no','width=375,height=300')" shape="rect" coords="79,290,130,325" alt="Photo(kichen)" target="_blank">
- ベストアンサー
- HTML
- ランダム表示画像にリンクマップを貼れますか?
ページの上部に、ページが更新するたびに違う画像が 表示されるようにJavaScriptで記述をしているのですが、 その画像の数箇所に、別々のURLを貼りたいのです。 ランダム表示ではない通常の画像の場合、 それぞれの形に合わせてエリアを指定し、 リンクマップをすればいいと思うのですが、 ランダム表示をしている画像に対しては どうすれば良いのでしょうか? また、リンクを貼る部分をオンマウスオーバーするようにも したいのです。 このような事は可能なのでしょうか?
- 締切済み
- JavaScript
- 画像内リンクについて
ホームページの操作方法を説明する、 クリッカブルを作成しています。 HTMLにホームページのキャプチャ画像を貼り、 実際のホームページのように、 画像のリンク文字部分をクリックすると、 指定したリンク先に飛ばすといったものを作っているのですが、 画像内の特定の座標をクリックしたとき、 同じ画像内の別の座標に飛ばすということは出来ますでしょうか。 方法はタグでも何でもいいですが、 社内ネットワーク内だけで公開するものなので、 ローカル環境で動くもので、ご提案いただけるものがありましたら ご教示ください。
- 締切済み
- HTML
- 外部CSSで画像にリンクを貼りたい
まだCSS初心者ですので宜しくお願いします。 外部CSSに位置指定した「画像」にリンクを貼りたいのですが いろいろ調べてもその方法がわかりません。 以下のタグにどのようにリンクの指定をすればよいでしょうか? div#index{ margin-top:5px; background:url(../img/oribox.gif) no-repeat right bottom; } また、HTMLにはどのように記述したらよいかも宜しくお願いいたします。
- ベストアンサー
- HTML
- 画像にリンク
ホームページビルダー7にてHP作成しております。画像のロールオーバーを作成しましてメニューボタンを作成いたしました。そのボタンを「お問合わせ」とし、メールへリンクするようにしたいのです。通常の画像や文字などからは右クリックで「リンクの挿入」を指示しメールへリンクが出来るのですが、画像ロールオーバーで作成したものにリンクしようと思ってもできません。右クリックしますと「リンクの設定」というメニューはグレーになっていてクリックできません。右クリックし「属性の変更」でリンクの指定が出来るのですが、ファイルが対象になっているようでメールへリンクすることはできないようです。ご存知の方がいらっしゃいましたらよろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- リンク付きの画像を自動にスクロールさせる方法教えて
楽天内でネットショップを開いています。HP作成に困っております。 http://item.rakuten.co.jp/e-zakkamania/c/0000000100/ 上記のサイトの流れているバナーのように 画像が自動的にスクロールをし、画像をクリックしたら指定リンク先へ飛ばします のようなHPソースを教えていただければ嬉しいです。 初心者ですので、ソースに詳しくないです。 詳しいソースを教えていただければ助かります。
- 締切済み
- その他([技術者向] コンピューター)
お礼
こんなにご丁寧にご説明いただき、大変恐縮です。 私もまだまだ勉強が足りないようで、もっと精進せねばと 思いました。 本当にありがとうございました。