掲示板/HTML質問板/過去ログ/一覧/ インラインフレームのフレーム内の表示方法について

0 名前：ぷあ： 2006/10/11（水） 21:27 ID:sAdFYl65: 画像の一部をクリックするとその画像の指定された場所にほかのページが表示される（ほかのページはフレームになっています）やり方をやろうと思っています

でも画像の一部をクリックすると新窓で出てきてしまいます

同窓で指定された場所に表示する方法を教えてください

1 名前：匿名： 2006/10/11（水） 21:27 ID:H5.S.5wa: http://www.tagindex.com/html_tag/frame/i_target.html
これではない？

2 名前：ぷあ： 2006/10/11（水） 21:27 ID:sAdFYl65: それでも出来ません…
ちなみにソースはこれです
<area shape="circle" coords="315,160 15" href="about.html" >
<area shape="circle" coords="415,160 15" href="http://pooh0225eight.blog78.fc2.com/" target="_self">
<area shape="circle" coords="450,150 15" href="mix.html" target="_self">

3 名前：匿名： 2006/10/11（水） 21:27 ID:5is0ul4A: http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#edef-AREA
を見るとAREA要素の代わりにA要素をつかえば良いようです。
<a shape="circle" coords="315,160 15" href="about.html" >
<a shape="circle" coords="415,160 15" href="http://pooh0225eight.blog78.fc2.com/" target="_self">
<a shape="circle" coords="450,150 15" href="mix.html" target="_self">

4 名前：ぷあ： 2006/10/11（水） 21:27 ID:sAdFYl65: それでもできません
ソースはコレです
<html>
<head>
<title>Infinity 無限の力を信じて…</title>
</head>
<div style='position:relative;z-index:1;'>
<map name="purin">
○<a shape="circle" coords="315,160 15" href="about.html" >
<a shape="circle" coords="415,160 15" href="http://pooh0225eight.blog78.fc2.com/" target="_self">
<a shape="circle" coords="450,150 15" href="mix.html" target="_self"> ○
</map>
<img src="ami-mix1２.jpg" usemap="#purin" alt="Infinity">
<iframe src="about.html" name="about" style="left:300px;top:180px;position:absolute;z-index:2;" frameborder="0" width="250" height="160" scrolling="auto" allowtransparency="true"></iframe>
</div>
</body>
</html>
△<area shape="circle" coords="315,160 15" href="about.html" alt="あばうと"></A>
<area shape="circle" coords="415,160 15" href="http://pooh0225eight.blog78.fc2.com/" alt="ぶろぐ"></A>
<area shape="circle" coords="450,150 15" href="mix.html" alt="みっくす"></A>
<area shape="default" nohref>△
ちなみに○～○内は匿名さんに教えてもらったとおりにやった場所です。教えてもらう前のソースが△～△内です
ちなみにこんな風にしたい参考サイト
http://maple.fuwari.biz/

5 名前：匿名： 2006/10/11（水） 21:27 ID:UeYO9yfD: * 今回の場合、a 要素でなく、area 要素で問題ありません
* area 要素に 'target="about"' を追加してください

他に直すべきところ
* area 要素の終了タグが、</A> となっています
* coords 属性値は、すべてコンマ区切りです
* 移行型の文書型宣言を追加してください
* z-index プロパティは必要ないのでは？

以上を踏まえてソースを示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Infinity 無限の力を信じて…</title>
</head>
<div>
<map name="purin">
<area shape="circle" coords="315,160,15" href="about.html" target="about" alt="あばうと"></area>
<area shape="circle" coords="415,160,15" href="http://pooh0225eight.blog78.fc2.com/" target="about" alt="ぶろぐ"></area>
<area shape="circle" coords="450,150,15" href="mix.html" target="about" alt="みっくす"></area>
<area shape="default" nohref>
</map>
<img src="ami-mix1２.jpg" usemap="#purin" alt="Infinity">
<iframe src="about.html" name="about" style="left: 300px ; top: 180px ; position: absolute" frameborder="0" width="250" height="160" scrolling="auto" allowtransparency="true"></iframe>
</div>
</body>
</html>

>>2
a 要素の終了タグは？
# 仕様書を参照するなら、もう少しきちんと確認してほしいなぁ

6 名前： 5 ： 2006/10/11（水） 21:27 ID:UeYO9yfD: 失礼しました。
>>2 ではなく、 >>3 ですね。
# Windows / Macintosh / Linux と OS が勢ぞろい。

7 名前： 5 ： 2006/10/11（水） 21:27 ID:6LX2wmdc: あー……

area 要素は空要素だった。

> <!ELEMENT AREA - O EMPTY -- client-side image map area -->

を見て、思わず終了タグが省略可能なのかと思ってしまった。
訂正します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Infinity 無限の力を信じて…</title>
</head>
<div>
<map name="purin">
<area shape="circle" coords="315,160,15" href="about.html" target="about" alt="あばうと">
<area shape="circle" coords="415,160,15" href="http://pooh0225eight.blog78.fc2.com/" target="about" alt="ぶろぐ">
<area shape="circle" coords="450,150,15" href="mix.html" target="about" alt="みっくす">
<area shape="default" nohref>
</map>
<img src="ami-mix12.jpg" usemap="#purin" alt="Infinity">
<iframe src="about.html" name="about" style="left: 300px ; top: 180px ; position: absolute" frameborder="0" width="250" height="160" scrolling="auto" allowtransparency="true"></iframe>
</div>
</body>
</html>

それから、ひょっとして、'target="_self"' がついていたリンクはインラインフレームの外に
表示したいのかもしれませんね。そうだとしたら、'target="about"' を外してください。

>>3
他人のこと言えませんね……

8 名前： 5 ： 2006/10/11（水） 21:27 ID:6LX2wmdc: まだある……

* body 要素の開始タグがありません (省略可能ですが)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<title>Infinity 無限の力を信じて…</title>
</head>
<body>
<div>
<map name="purin">
<area shape="circle" coords="315,160,15" href="about.html" target="about" alt="あばうと">
<area shape="circle" coords="415,160,15" href="http://pooh0225eight.blog78.fc2.com/" target="about" alt="ぶろぐ">
<area shape="circle" coords="450,150,15" href="mix.html" target="about" alt="みっくす">
<area shape="default" nohref>
</map>
<img src="ami-mix12.jpg" usemap="#purin" alt="Infinity">
<iframe src="about.html" name="about" style="left: 300px ; top: 180px ; position: absolute" frameborder="0" width="250" height="160" scrolling="auto" allowtransparency="true"></iframe>
</div>
</body>
</html>

# 大丈夫かなぁ……

9 名前： 5 ： 2006/10/11（水） 21:27 ID:6LX2wmdc: ……
* area 要素には alt 属性が必要です

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<title>Infinity 無限の力を信じて…</title>
</head>
<body>
<div>
<map name="purin">
<area shape="circle" coords="315,160,15" href="about.html" target="about" alt="あばうと">
<area shape="circle" coords="415,160,15" href="http://pooh0225eight.blog78.fc2.com/" target="about" alt="ぶろぐ">
<area shape="circle" coords="450,150,15" href="mix.html" target="about" alt="みっくす">
<area shape="default" nohref alt="">
</map>
<img src="ami-mix12.jpg" usemap="#purin" alt="Infinity">
<iframe src="about.html" name="about" style="left: 300px ; top: 180px ; position: absolute" frameborder="0" width="250" height="160" scrolling="auto" allowtransparency="true"></iframe>
</div>
</body>
</html>

スレッド汚してすみません……

10 名前：ぷあ： 2006/10/11（水） 21:27 ID:sAdFYl65: 出来ました!!!!!!!!
本当に有り難う御座います！
これから私自身もっとこういうことできるように頑張りたいです！

本当に有り難う御座います！