画像の中に複数の画像のリンクを作るにはどうすれば?

[新着] Webテンプレートを仮オープンしました



0   名前: UK : 2007/04/11(水) 21:36  ID:RMdQ5Ix2 sub-9g
こちらの掲示板のほうの扱いだと思いましてスレッド立てさせていただきます。

画像内に画像で複数のリンクをつけるのは、こちらのサイトでも下記のようにありましたが、
http://www.tagindex.com/html_tag/img/img_map.html
このような幾何学的な図形ではなく、絵や写真などで画像内の複数リンクを作るにはどうすればよいのでしょうか。

僕はjavascriptやCSSなどには全く知識が無く、完全なペーパーなのですが、
HTMLやjavascriptなどで可能な方法があればご教授願います。

この程度の説明で分かっていただければ幸いです。
どうかよろしくお願いします。

1   名前: Z ◆XTzyosZXcL : 2007/04/11(水) 21:36  ID:XzBwlIqx sub-Cl
 使う画像の種類が違うだけで基本は同じになるはずですが、実際にソースをかかれて実験されてうまくいかなかった、ということでしょうか?

クリッカブルマップ(イメージマップ)とは:
http://www.marguerite.to/Nihongo/HowToMakeYourWeb/HTML/ClickableMap.html

HTML4.01仕様書該当部分(イメージマップ):
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6
http://www.w3.org/TR/html401/struct/objects.html#h-13.6

仕様書の読み方など(HTMLの基本):
http://www.kanzaki.com/works/2001/pub/wsd01.html

関連しそうな掲示板Q&A:
http://www.tagindex.com/bbs/qa09.html#a05
http://www.tagindex.com/bbs/qa07.html#a02

2   名前: UK : 2007/04/11(水) 21:36  ID:RMdQ5Ix2 sub-9g
お返事ありがとうございます。

>実際にソースをかかれて実験されてうまくいかなかった、ということでしょうか?
いえ、まことに情けないことなのですが、
どのようなタグで書いたらいいのかがよく分からず、
うまくソースが書けないでいます。
とりあえず、自分なりに「これじゃ出来ないんだろうな」と思いながらも、
無駄な抵抗をしてみたのですが、結局全て失敗に終りました。

始めに僕のリンクした場所では、areaを使っているんですが、
僕の知りうる限りではareaというのには、
円や多角形などの幾何学図形しかないのようなのですが、
この図形の変わりに、写真などを使いたいのです。
リンクしていただいたページにも、
areaでは図形しか出せないようなことを書いていた様に思えます。

それとも、area以外のタグを使うのでしょうか。


3   名前: 匿名 : 2007/04/11(水) 21:36  ID:qhthfkfH sub-Ds
1さんの提示された資料は読まれた上での2ですよね?

写真でもできますよ。写真をどういう風に複数にしたいのかを示さないと。幾何学っていうけど、細かい直線の連続で殆どの図形はトリミング出来ますしねぇ。普通に考えると写真って四角ですし、簡単なのでは?

写真を図形でなく出すって言う意味もわからないのですが。計算が苦手なら、補助ソフトを使って、直線でお絵かき的にくりぬくって方法もあるし、「できない、できない、失敗した」の努力の跡を見せてもらうとつまずいている原因がわかるでしょ。成功したら質問しなくていいわけで、失敗に終わった物を見せてください。

例えば写真の人物の部分として、それも図形ですよね。図形外にリンクするって意味もわかりません。

4   名前: とおりすがり : 2007/04/11(水) 21:36  ID:UWsZexeD sub-gm
イメージマップではなくimg(<a href=""><img></a>)でリンクがしたいだけでは?

えーと、こんな感じ?

<div id="gazo">
<a href=""><img src="link1.jpg" alt="" id="link1"></a>
<a href=""><img src="link2.jpg" alt="" id="link2"></a>
</div>

#gazo{ background-image:url(gazo.jpg); position:relative; width:300px; height:200px; }/* でかい画像を背景に、画像のサイズをブロック要素の大きさに指定 */
#link1{ position:absolute; top:10px; left:10px; }/* でかい画像の左上を基点に、上からの位置、左からの位置を指定 */
#link2{ position:absolute; top:20px; left:30px; }

5   名前: UK : 2007/04/11(水) 21:36  ID:RMdQ5Ix2 sub-9g
皆さん有難う御座います。
なんとか思い通りに出来たようです。

>3:匿名さんへ
どうも分かりにくい説明で申し訳ありませんでした。
これからはもう少し回答者への配慮をした質問形式にしたいと思います。

>4:とおりすがりさんへ
すこし違っていたので、頑張って自分でもう少し調べてみました。
ソースの一部がとても大きなヒントとなりました。

繰り返し、本当に有難う御座いました。

一覧へ戻る