掲示板/HTML質問板/過去ログ/一覧/ <AREA SHAPE>について

0 名前：薫： 2006/06/05（月） 10:18 ID:ksrwWoVH: <AREA SHAPE>を利用して画像にリンクを設定しています。
1つの画像に複数設定しているのですが、リンクが設定されるものと、
リンクが設定されないものがあります。
書式は以下で統一しているので、誤りはないと思います。

<AREA SHAPE="RECT" COORDS="xxx,xxx,xxx,xxx" HREF="#" onClick="PostUrl('xxx.cgi','xxxx');return false;" TARGET="_blank">

1つの画像に設定できるリンク数に制限などがあるのでしょうか？

1 名前：薫： 2006/06/05（月） 10:18 ID:ksrwWoVH: 原因がわかりました。
<AREA SHAPE>の前後にコメントを入れているのですが、これが原因のようです。
正確には、コメントに書かれている文字が原因のようで、コメントを変更したり、
コメントを削除することによってリンクが設定されました。
コメントは「」で括っており、書き方に誤りはないと思います。
実際にコメントをつけていても、リンクの設定がされている部分がありましたので・・・

すっきりしない部分がありますが、一応問題が解消できました。

調べて下さっている方々、ありがとうございました。

2 名前： Pid ◆byEkK9OALr ： 2006/06/05（月） 10:18: > 書き方に誤りはないと思います

つ http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

あまり聞いたことのない事例なので，どんなブラウザで，どんなコメントだと OK で，どんなコメントだと NG なのか，その際の文字コードは何かなど，詳しく教えてもらえるとありがたいです。

3 名前：薫： 2006/06/05（月） 10:18 ID:ksrwWoVH: Pidさん

私の使用しているブラウザはIE6.0です。
コメントですが、規則性はまだつかめていません。
ある部分では「ビジネス」という文字が入っているところを
削除したら表示されたのですが、他の部分では「ビジネス」
という文字が入っていても問題ありませんでした。

文字コードですが、よくわかりません。申し訳ありません。
（Windows上で作成したテキストです。）
WebサーバはApacheでOSはSolaris8です。

友人に聞いた話ですが、「<TR>」タグの中にコメント入れると
必ずではないが、正常に表示されない場合があるとのことでした。

参考にならず申し訳ありません。

4 名前： Pid ◆byEkK9OALr ： 2006/06/05（月） 10:18: こういうのはまず機械的にチェックするのが吉ですが，>>2 の Validator で何か警告されませんでしたか。

また，『リンクが設定される』というのは，アンカーにはなるがクリック等で反応しないということなのでしょうか（それならば CSS 周りが怪しい），それともアンカーにすらならないということなのでしょうか（それならば HTML 周りが怪しい）。

> 「<TR>」タグの中にコメント入れると

というのは <tr  > ということでしょうか。tr 要素に限らず，これは確かにマズいです。

ソースを提示してもらえれば手っ取り早いのですが，まあ，解決済みの話題をあんまり引っ張るのも申し訳ないので，時間に余裕がありましたら御検証下さい。

とにかく，area 要素に数の制限はありませんし，コメント区間にも制限は無いはずなので，書き方のミスなのか，ブラウザのバグなのかがはっきりすると良いですね。

5 名前：薫： 2006/06/05（月） 10:18 ID:ksrwWoVH: Pid様

以下の警告が出力されました。

6: line 5: <IMG> には ALT 属性が必要です。 → 解説 86
5: line 8: <AREA> に HTML4.0、HTML4.01 Transitional、HTML4.01 Frameset、XHTML1.0、Mozilla または MSIE 用の属性 `TARGET` が指定されています。 → 解説 80
6: line 8: <AREA> には ALT 属性が必要です。 → 解説 86
1: line 8: ONCLICK 属性を使うときは ONKEYPRESS 属性も指定しましょう。 → 解説 150

しかし、もともとあったファイルの<AREA SHAPE>の数を増やして、コメントを追加しただけなので、
上記の警告はあまり気にしていないのですが・・・

実際には以下の内容を「xxx.txt」して保存し、cgiで読み込んでいます。

<IMG SRC="../xxx/xxx/xxx.gif" WIDTH="980" HEIGHT="1227" USEMAP="#xxx" BORDER="0">
<MAP NAME="itss_map">

<AREA SHAPE="RECT" COORDS="xxx,xxx,xxx,xxx" HREF="#" onClick="PostUrl('xxx.cgi','1225AA200002');return false;" TARGET="_blank">

<AREA SHAPE="RECT" COORDS="yyy,yyy,yyy,yyy" HREF="#" onClick="PostUrl('xxx.cgi','1225AA200001');return false;" TARGET="_blank">

<AREA SHAPE="RECT" COORDS="zzz,zzz,zzz,zzz" HREF="#" onClick="PostUrl('xxx.cgi','1225AA201004');return false;" TARGET="_blank">
・
・
・
・
</MAP>

「リンクが設定されている」というのはアンカーになり、クリックすると反応します。
今回問題となったのが、同じ記述をしているにもかかわらず、アンカーにすらならないことでした。
コメント行を削除したり、変更したりすることで、アンカーになりました。
コメントなしで、<AREA SHAPE>だけを記述した場合、アンカーになり、問題なく動作するので、
HTMLの記述やブラウザの設定、マシン自体には問題がないものと判断しています。

<TR>の件ですが、<TR></TR>とした場合です。

至らない記述が多く申し訳ありません。

ご助言ありがとうございました。

6 名前： Pid ◆byEkK9OALr ： 2006/06/05（月） 10:18: > 上記の警告はあまり気にしていないのですが
> HTMLの記述やブラウザの設定、マシン自体には問題がないものと判断しています

HTML はただ記述すれば良いのではなく，人間にとっての使いやすさ・機械処理のしやすさを考慮した「文法」が定められています（ちなみに，XML だと文法制約はかなり厳しいです）。

area 要素には alt 属性が必須であり，無ければ文法違反となります。それは結局のところ「いろんな意味で使いづらいページ」ということに他なりません。利用者に気持ち良く使ってもらうためにも，少なくとも減点 5 以上のエラーは確実に修正して下さい（まあ，何かのシステムっぽいので，細かなアクセシビリティは今は考えません）。

> <AREA SHAPE="RECT" COORDS="xxx,xxx,xxx,xxx" HREF="#" onClick="PostUrl('xxx.cgi','1225AA200002');return false;" TARGET="_blank">

ああ，こういう書き方をしておられたのなら，問題が生じる可能性はあります。ただ，今はちょっと代替案が思い浮かびません。すみません。

7 名前： Z ◆XTzyosZXcL ： 2006/06/05（月） 10:18 ID:7f4VEd9L: >>5
>上記の警告はあまり気にしていないのですが・・・
　なぜその警告がでるのか気にしてください。解説はお読みになりましたか？

　また、href属性に"#"としかないため、スクリプトを使わない（が使えない）環境では適切にリンクが働かないことでしょう。target属性で強制的に新しいウインドウを開かされる（"_blank"）のも、閲覧環境によってはかえって不便を強いることになるかもしれません。

参考）
http://bakera.jp/html/opinion/zannen2.html
http://car.s35.xrea.com/better/target.php

組み込みイベントについての仕様書該当部分）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/scripts.html#h-18.2.3
http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3

8 名前：薫： 2006/06/05（月） 10:18 ID:ksrwWoVH: Pid様　Z様

ご指摘ありがとうございます。
前任者が作成したものをそのまま使用しており、alt属性が必須ということを
知りませんでした。
私の勉強不足でした。

この環境はイントラで使用している環境なので、クライアント側PCの設定は
すべて同じになっております。（OS,ブラウザなど）

調べたところ、DOCTYPE宣言が宣言されていないのですが、現在どのバージョンの
HTMLが使用されているか確認する方法はありますでしょうか？

また、alt属性を記述して再度確認してみましたが、現象自体は変わりませんでした。

Pid様
どの部分で問題が生じる可能性があるのかお教えいただけないでしょうか？

Z様
資料のご提示ありがとうございました。

9 名前： F ◆31IwthomhZ ： 2006/06/05（月） 10:18: >>現在どのバージョンのHTMLが使用されているか確認する方法はありますでしょうか？
　文法チェッカでバージョン毎に使えない要素・属性のチェックができると思いますし、仕様書の要素一覧と比較してもできるでしょう。
　確か文書型宣言がなければHTML2.0として扱われたと思いますが、それだとあまりにも古すぎるため現状ではHTML4.01とみなすようになっていると思います。

＃というか、文書型宣言がなければまっさきにエラーとなるはずですが＞html-lint

10 名前： Z ◆XTzyosZXcL ： 2006/06/05（月） 10:18 ID:7f4VEd9L: >>8
>この環境はイントラで使用している環境なので、クライアント側PCの設定は
>すべて同じになっております。（OS,ブラウザなど）
　そういうお話は出来れば最初に提示してください(^^;

参考：質問の仕方（http://www.tagindex.com/bbs/advice.html ）から一部引用
「ポイント
・自分の目的を具体的に伝える。」

　イントラネットで閲覧者が限定される環境なのであれば、かならずしも「どんな環境でも閲覧できるページ作り」を目指す必要性はないのですから。まして、HTMLとして不正な文書だろうと使うUAで表示さえされて操作さえされればどうでもよい、という考え方もなりたちます（WWW上に一般公開するのであればWCAG1.0ないしWCGA2.0に沿った方がよいのですが）。
　ただ、そうなるとHTML4.01よりはJIS-HTML、ないしXHTMLの方が社内における作業手順を文書化して定型化しやすいかもしれません。あるいはCMS（コンテンツマネジメントシステム)を導入するなどの選択肢もあり得ます。

参考）
http://members.jcom.home.ne.jp/pctips/15445/
http://www.kanzaki.com/docs/html/xhtml1.html
http://rblog-ent.japan.cnet.com/geeklog/

>どの部分で問題が生じる可能性があるのかお教えいただけないでしょうか？
　私がすでに>>7で可能性についてお話させていただきました。しかしながら先にも述べたとおり「イントラネット内部」で「閲覧環境が限定」で「スクリプトON必須」な設定にさせるのであれば、>>7は蛇足にしか過ぎなくなります。

11 名前： Pid ◆byEkK9OALr ： 2006/06/05（月） 10:18: >>8
> どの部分で問題が生じる可能性があるのかお教えいただけないでしょうか？

すみません偉そうなこと言ってすみません。>>5 のソースは既に >>0 で出てましたね。

根拠を示せなくて申し訳ないのですが，WinIE6 の area 要素は特殊で，スクリプトによるノード操作ができなかったと思います。また，shape 属性と href 属性の組み合わせによってはリンクが動作しなかったと思います。

※昔のコードが手元になく，検索してもそれらしい情報が出てこないので，ガセかもしれません。あまり信用しないで下さい。

>>7
> href属性に"#"としかないため、スクリプトを使わない（が使えない）環境では適切にリンクが働かないことでしょう

私もそれが心配だったのですが，onclick 内の関数名が PostUrl()，つまりデータを POST する関数のようなので，「同等の代替手段」がないのです（GET であれば，href="xxx.cgi?1225AA200002" と書けば済むのですけどね）。

12 名前：薫： 2006/06/05（月） 10:18 ID:ksrwWoVH: F様
同僚等にも聞き、まさに同じようなことを言われました。
文法チェッカの使用法も含め、HTMLをもっと勉強する必要性を実感しました。

Z様
私の勝手な判断で環境について省略していました。
申し訳ありません。
ご回答いただく際にはやはり重要な点ですね。
申し訳ありませんでした。

Pid様
度々のご返答ありがとうございます。

既存のものを手直ししている状況で、今までは正常に動作していたため、
私一人でソース（使っている関数など）を勝手に変更すべきか迷っています。
当面はコメントをはずすという手段で回避しようと思っています。

私自身の知識を多くし、自分で説明ができるようになった段階で、
この件の改修を提案してみようと思います。
皆様、親切なご回答ありがとうございました。

特に文法チェッカは今後も使用させていただこうと思っております。