USEMAPでフラグメントリンク

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
こんにちは、分からない事がありましたのでお願いします。

【何をしたいのか】
USEMAPを使ったリンクで○○.htm#○○にリンクできますか?

【現在の状況】
全く機能しません…。.htmへはリンク出来たのですが…。

【何をしてみたのか】
絶対リンク、相対リンク等リンクの表記方法を変えてみました。

【備考】
ドリームウェーバーを使っています。
メモ帳でもプログラム読めます。

講座などでもそういった注意書きを載せているところがなくて困っています。
よろしくお願い致します。

1   名前: カヅサツ ◆ThCi95HEzw : 2006/09/11(月) 18:44  [URL]  ID:O5hEMlpW
私も今、検証して知ったのですが、どうも Windows版 Internet Explorer は、イメージマップによる別ページへのページ内リンクが、上手く機能しないことがあるようです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<h1>test</h1>
<p><img src="http://www.tagindex.com/image/logo/title_head.gif" alt="tag index掲示板"
usemap="#maptest">
<map name="maptest">
<area shape="rect" coords="0,0,89,47" href="http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi#CateLink2" alt="HTML掲示板">
</map></p>
</body>
</html>

一度移動してから戻り、再びリンクを辿ると上手くいきます。
また、自分自身へのページ内リンクは問題ありません。

これはブラウザのバグですので、ちょっとどうしようもないと思います。他のマトモなブラウザでは問題なく機能します。

2   名前: sevi- : 2006/09/11(月) 18:44  ID:9J5RKOHs
というか、普通のリンクでもそのようだ.
2度目ではうまく行く事から推測するに、ページ全体が読み込まる前にハッシュ移動を試みようとしているように思われる.
(初回は読み込み途中でハッシュを調べる為、探索に失敗している?)

そこで以下のようなスクリプトで文書内のlinkに細工を施し,事前に見えないiframeを使用し完全に読み込ませた後,
改めて移動処理を実行するよう修正しみた所、うまく移動するようになった.
IEのみの問題のようなのでIEのみ実行するようにすると良いと思われる.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<script type="text/javascript">
<!--
function initialize_links()
{
	if(document.all == null || document.readyState == null)
		return;
	var links = document.links;
	var link;
	for(var i=0; i<links.length; i++)
	{
		link = links[i];
		if(link.hash == null || link.hash.length < 2)
			continue;
		link.href = "javascript:loadCompletedJump('" + link.href + "');";
	}
}
function loadCompletedJump(href, target)
{
	var iframe = document.createElement("iframe");
	iframe.style.display = "none";
	document.body.appendChild(iframe);
	iframe.src = href;
	check_loadcomp();
	function check_loadcomp()
	{
		var iframe = document.body.lastChild;
		if(iframe.readyState == "complete")
		{
			location.href = href;
			return;
		}
		setTimeout(check_loadcomp, 1);
	}
}
//-->
</script>
</head>
<body onload="initialize_links();">
<h1>test</h1>
<p><img src="http://www.tagindex.com/image/logo/title_head.gif" alt="tag index掲示板"
usemap="#maptest">
<map name="maptest">
<area shape="rect" coords="0,0,89,47" href="http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi#CateLink2" alt="HTML掲示板">
</map></p>
<a href="http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi#CateLink2">HTML掲示板</a>
</body>
</html>

3   名前: sevi- : 2006/09/11(月) 18:44  ID:9J5RKOHs
targetが設定されていた場合の処理を失念していたので再提出する.

function initialize_links()
{
	if(document.all == null || document.readyState == null)
		return;
	var links = document.links;
	var link;
	for(var i=0; i<links.length; i++)
	{
		link = links[i];
		if(link.hash == null || link.hash.length < 2)
			continue;
		link.href = 
			"javascript:loadCompletedJump("+
			"'" + link.href + "'"+
			",'" + link.target + "'"+
			");";
		link.target = "_self";
	}
}
function loadCompletedJump(href, target)
{
	var iframe = document.createElement("iframe");
	iframe.style.display = "none";
	document.body.appendChild(iframe);
	iframe.src = href;
	check_loadcomp();
	function check_loadcomp()
	{
		var iframe = document.body.lastChild;
		if(iframe.readyState == "complete")
		{
			if(target == null || target.length == 0)
				target = "_self";
			window.open(href, target);
			return;
		}
		setTimeout(check_loadcomp, 1);
	}
}

4   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
ありがとうございます!sevi-さんのプログラムで他のページから飛ばす事は出来ました!!

もともとバグだったのですね…知りませんでした…。
Windows版 Internet Explorerでしか動作確認していないもので;

聞いてばかりで申し訳ないのですが、同じページ内では出来ますか?
マップを使って同じページ内の上部から中部、中部から下部に飛ばすフラグメントもやりたいのですが、
頂いたプログラムでは出来ませんでした…。
相対と絶対もやってみました。

出来るようでしたら教えて下さいm(_ _)m

あと、<A NAME="">で指定する名前ですが、何か規則などはあるのでしょうか?
単純に1・2等の名前つけだったのですが…。

何度もすいませんが、ご教授下さい。

5   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
今ネスケで検証してみたところ、ネスケではスクリプトを入れなくても
ページ内フラグメントリンク、ページ外フラグメントリンク共に出来ました。
Macでは検証できませんが…。
本当にIEのバグなんですね(T_T)

6   名前: K+S : 2006/09/11(月) 18:44  ID:nROqylMa
> あと、<A NAME="">で指定する名前ですが、何か規則などはあるのでしょうか?
name属性値については、nameトークンのルールに従えばよいと思います。
ラベルリンクにおいては、同時にid属性、idトークンに関しての考慮もされるとよいと思います。

7   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
nameトークンですか。初めて聞きました。
アルファベットで始める方がいいのですね…。
ありがとうございます。

ですが、英語でもやはり出来ませんでした…。
バグという事なので同ページ内はどうやっても無理なのでしょうか(T_T)

8   名前: sevi- : 2006/09/11(月) 18:44  ID:9J5RKOHs
申し訳ない.
「文書内を指すアンカーへの移動ができない」という現象をこちらで確認できない.
当方が確認した範囲内では普通にそれらも動作するようだ.
悪いが,現象が確認できる最低限のコードを提出して頂きたい.

尚、以下は提出したスクリプトに更に細かい補正を加えたものである.
(文書内を指すアンカーへの移動がそちらでできないという現象を修正するものではない)

function initialize_links()
{
	if(document.all == null || document.readyState == null)
		return;
	var links = document.links;
	var link;
	for(var i=0; i<links.length; i++)
	{
		link = links[i];
		if(link.hash.length < 2 ||
			link.href.toLowerCase().replace(/\s/g,'').indexOf('javascript:')>-1)
			continue;
		link.href = 
			"javascript:loadCompletedJump("+
			"'" + link.href + "'"+
			",'" + link.target + "'"+
			");";
		link.target = "_self";
	}
}
function loadCompletedJump(href, target)
{
	var iframe = document.createElement("iframe");
	iframe.style.display = "none";
	document.body.appendChild(iframe);
	iframe.src = href;
	check_loadcomp();
	function check_loadcomp()
	{
		var iframe = document.body.lastChild;
		if(iframe.readyState == "complete")
		{
			iframe.parentNode.removeChild(iframe);
			if(target == null || target.length == 0)
				target = "_self";
			window.open(href, target);
			return;
		}
		setTimeout(check_loadcomp, 1);
	}
}

9   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
sevi-さん、何度もありがとうございます。
現在のソースは大体↓のような感じです。
他のJAVAも入れているため、これが原因かと思い、書かせて頂きました。
ロードしているメニュー用の画像、元々のメニュー画像ともに本来はもっと多いです。

また、フラグメントリンクしている画像ももっと大きな物で、
1つの画像にいくつものフラグメントリンクを貼っています。

お手数ですが、ご教授頂ければ幸いです。
よろしくお願い致します。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function initialize_links()
{
if(document.all == null || document.readyState == null)
return;
var links = document.links;
var link;
for(var i=0; i<links.length; i++)
{
link = links[i];
if(link.hash.length < 2 ||
link.href.toLowerCase().replace(/\s/g,'').indexOf('javascript:')>-1)
continue;
link.href =
"javascript:loadCompletedJump("+
"'" + link.href + "'"+
",'" + link.target + "'"+
");";
link.target = "_self";
}
}
function loadCompletedJump(href, target)
{
var iframe = document.createElement("iframe");
iframe.style.display = "none";
document.body.appendChild(iframe);
iframe.src = href;
check_loadcomp();
function check_loadcomp()
{
var iframe = document.body.lastChild;
if(iframe.readyState == "complete")
{
iframe.parentNode.removeChild(iframe);
if(target == null || target.length == 0)
target = "_self";
window.open(href, target);
return;
}
setTimeout(check_loadcomp, 1);
}
}

//-->
</script>
</HEAD>
<BODY ONLOAD="initialize_links(); MM_preloadImages('./images/menu/1.gif')" BACKGROUND="./images/haikei.jpg">
<A HREF="index.htm" ONMOUSEOUT="MM_swapImgRestore()" ONMOUSEOVER="MM_swapImage('Image1','','./images/menu/1.gif',1)">
<IMG SRC="./images/menu/1-1.gif" NAME="Image1">
</A><BR>
<IMG SRC="http://www.tagindex.com/image/logo/title_head.gif" alt="tag index掲示板" USEMAP="#Map" BORDER="0">
<MAP NAME="Map">
<AREA SHAPE="rect" COORDS="0,0,89,47" HREF="#A1">
</MAP>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="A1"></A>
<IMG SRC="http://www.tagindex.com/image/logo/title_head.gif" alt="tag index掲示板" USEMAP="BORDER="0">
</BODY>
</HTML>

10   名前: sevi- : 2006/09/11(月) 18:44  ID:9J5RKOHs
ちゃんと動くぞ.
一部消し忘れか何か判らないが場合によってはエラーがでそうな記述があるが

<IMG SRC="http://www.tagindex.com/image/logo/title_head.gif" alt="tag index掲示板" USEMAP="BORDER="0">
(USEMAP="BORDER="0" <この辺)

今回動作しないという内容とは関係なさそうだ.

一つ思った事があるのだが,リンクにハッシュを指定することで文書内のアンカー配置箇所への自動スクロールが可能なのは
あくまで文書上の手動スクロール可能な範囲迄だ.
仮にその文書がスクロールバーが表示される程内容量が無く、一画面上の表示で全て収まるような内容であるなら,
いくらアンカーを指定してもスクロールはされないし、スクロール量が十分でも対象となるアンカーが文書内の最終行に近い
箇所に配置されている場合,リンクさせてもスクロール可能な箇所までしかスクロールはされない.
タグインデックスのページへのリンクが正しく動作するのはページ全体のスクロール量,アンカー配置場所が
条件を十分に満たしているからである.

例えば今回提出していただいた文書の場合、私の環境では改行要素(br)の数が足りず,一画面で表示しきってしまっていた.
なので確認はウインドウ枠を狭めスクロールバーを表示させてから行っている.

アンカー指定でスクロール移動させれるのはあくまで通常のスクロールバー操作によるスクロール稼働可能範囲内である,
という事を踏まえて,本当に動作しないのかもう一度確認して欲しい.

11   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
お答えありがとうございます。
> (USEMAP="BORDER="0" <この辺)
これに関しては消し忘れです…すみません…。

一つの画像から5つ以上のフラグメントリンクをしているのですが、思いきって全部作り直して見たらいくつかは出来ました。
しかし5つ目からは(最終行に近く、スクロール可能な箇所までしかスクロールされないリンク)
機能しなくなっていました…。

USEMAP以外のフラグメントリンク設定の時に体験していたので、
最終行に近い場合は完全に目的の位置まで下がってくれない事は知っていたのですが、
最終行に近いところにアンカーポイントを置いた場合でも、位置が微動だにしない事は無いですよね…?
スクロール可能な箇所までは下に移動してくれると思うのですが、5つ目から全く動きません…。

また、実際のページの画像は800ピクセルくらい高さがあり、その下にテーブルでいろいろと文を入れているため、
画面解像度1280×1024ピクセルの画面でもスクロールしなければならないほど長いです。
一番下まで行くと最初に貼ってある800ピクセルの画像は完全に見えません。
(提出したソースの<BR>を少なくしてしまいすみませんでした…)


実際のページをアップしてお見せするのが早いのかもしれませんが、
今やっている作業が仕事のため規約上出来ず申し訳無いです…。

何か思い当たる事があればお教えください。

12   名前: sevi- : 2006/09/11(月) 18:44  ID:9J5RKOHs
もう本物のコードを見せて頂かねば検証は難しいと考える.
ここでコードを公開することができないというのなら,

口外しない,公開しない,検証が済んだ時点で即座に消去する事を誓うので,
問題の文書を添付し私の所へメールで送って頂きたい.

それで検証し原因が判明し解決した暁には,
後日改めて内容に抵触しない範囲で簡易な例となる
コードと問題となっていた箇所の説明でもここに投稿しよう.
むろん君の方へは問題を解消したコードを送り返そう.

但し,原因がブラウザの仕様に基づくものである可能性も今回の場合
ありえる.その場合回避策が見つからず解決しない可能性もある.
また,(そんな事はまず無いと思うが.)私の力量不足により原因が
判明しない可能性もまたありえる.これらは決断前に理解して置いて頂きたい.

それも不可能であるなら申し訳ないが,これ以上君の役には立てそうにないようだ.
自力で解決するか諦め給え.

13   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
sevi-さん何回もありがとうございます。
いろいろと検証してみたところ全て出来ました。
どうやらアンカーポイントの位置がマズかったようで、
頂いたスクリプト無しでもUSEMAPを使った同ページ内の移動ができてしまいました…。

もうsevi-さんはご存知かもしれませんが、
これからこの記事を見る方のために記載しておくと、
このように記述している場合は出来ず↓
<TABLE>
<TR>
<TD>1</TD>
<TD> </TD>
<TD><A NAME="1"></A></TD>
</TR>
</TABLE>

このような三つは出来ました↓
<TABLE>
<TR>
<TD>1</TD>
<TD> </TD>
<TD>1<A NAME="1"></A></TD>
</TR>
</TABLE>

<TABLE>
<TR>
<TD> </TD>
<TD> </TD>
<TD><A NAME="1"></A></TD>
</TR>
</TABLE>

<TABLE>
<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD><A NAME="1"></A></TD>
</TR>
</TABLE>

ずっとアンカーポイントを出来ない場合で置いていたので出来なかったようです…。

何度もお手数おかけしてすみませんでした。
本当にありがとうございました。

14   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
もう少し追加です。
■できなかった物
<TABLE>
<TR>
<TD><IMG SRC="http://www.tagindex.com/image/logo/title_head.gif"><A NAME="1"></A></TD>
<TD><IMG SRC="http://www.tagindex.com/image/logo/title_head.gif"></TD>
</TR>
</TABLE>

■出来た物
<TABLE>
<TR>
<TD><A NAME="1"></A>1</TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>


お答え頂いた皆様に重ね重ねお礼申しあげます。

15   名前: Z ◆XTzyosZXcL : 2006/09/11(月) 18:44  ID:O1F9KAP/
>>13,>>14
 本題の方は打ち切りとなっているため蛇足となりますが、>>6,>>7では「name属性には半角英数字を指定する」という展開だったと思うのですが、それはいかがなのでしょうか。

(確かにA要素のname属性はCDATAですが、id属性と同じ名前空間を共有することとされているため、NAMEトークン、すなわち「アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述」しておいた方が無難です。)

HTML4.01仕様書該当部分(A要素について):
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#h-12.2
http://www.w3.org/TR/html401/struct/links.html#h-12.2

HTML4.01仕様書該当部分(id属性について):
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id
http://www.w3.org/TR/html401/struct/global.html#adef-id

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

 UAの実装状態がまちまちであるため軽視されがちですが、「本来の仕様ではこうなっている」ということは知っていて損はないと思います(ましてお仕事でコーディングされているのであれば)。

16   名前: なお : 2006/09/11(月) 18:44  ID:wzfia0zo
>Zさん
たくさんのリンク先、ありがとうございます。
そのルールは実際のHTMLでは適用させて頂きました。

サンプルとして>>13-14にて提出させて頂いた物は
出来るだけ短く分かりやすくなるよう数字のみとさせて頂きました。
英語1字だとタグに紛れて埋もれてしまいがちですし…。

ご丁寧にありがとうございました。

17   名前: Z ◆XTzyosZXcL : 2006/09/11(月) 18:44  ID:O1F9KAP/
>>16
 了解しました。
 出来ましたら、今後はサンプルとしてあげる場合でも「仕様にのっとった形」で提示してください。他の方がこれらをコピー&ペーストして再利用する可能性がありますので(過去ログとしてこれらのやりとりは残されます)。

一覧へ戻る