0

画像マップを W3C XHTML 1.0 Strict に準拠させる方法はありますか?

このページの作業を行っていますが、W3C Validator バッジをクリックすると、検証エラーが表示されます。 

There is no attribute "type", <area type="rect" coords="21,19,155,76" ...

イメージ マップの <map> タグと <area> タグを置き換えた XHTML 1.0 Strict 準拠のタグはありますか?

w3c にアクセスしてその仕様を調べたところ、<li> がネストされた <nl> タグしか見つかりませんでしたが、それらを試してみたところ、試したどのブラウザーでも機能しませんでした。

4

6 に答える 6

5

属性の正しい名前がであるため、検証は失敗しますshape。つまり、行は次のようになります。

<area shape="rect" coords="21,19,155,76" ...

ただし、rectとにかくデフォルトであるため、type属性を削除するだけで済みます。

出典：XHTML 1.0 Trans DTD、検索ELEMENT area

于 2009-01-19T15:02:41.950 に答える
3

イメージマップは以前ほど使用されていませんが、いくつかのWebサイト（Facebook、MySpace、Flickr）が写真のタグ付けに使用しています。同様の結果を達成する方法を示すためのリンクは次のとおりです。

CSS画像マップ

CSSイメージマップ、Redux

A List Apart：イメージマップの夜

于 2009-01-19T15:00:26.260 に答える
0

代わりaにリンク要素を使用し、CSSを使用してそれらを配置します。これのようなもの（正確にはそうではありませんが）：

<div id="myheader">
    <a href="#" class="link1"><span>Link text for people without CSS</span></a>
</div>

と

#myheader {position:relative}
#myheader a {position:absolute;display:block}
#myheader a.link1 {top:5px;left:10px;width:20px;height:50px}
#myheader a span {display:none}
于 2009-01-19T15:04:33.350 に答える
0

成功！

A List Apart article on css spritesに案内してくれたOzone Asylumの誰かのおかげで、答えを見つけました。あなたは同じことをすることができますが、それは単純ではありません。(ただし、XHTML に準拠することはできます!)

私は実際にここで 1 つを行いました。大きな赤い矢印をクリックして、例を確認してください...

公平を期すために、少し安っぽく見えることは認めます...私のではなく、クライアントの写真の選択です!

于 2009-02-07T19:34:01.047 に答える
0

私はいくつかの調査を行いましたが、ブラウザーはまだ XHTML Strict 準拠のイメージマップをサポートしていないようです。

私の最後の障害は、ほとんどのブラウザーが機能するために usemap 属性に "#" を必要とすることでした。これは現在無効になっています。

ブラウザーがコンテンツ タイプ application/xhtml+xml を受け入れるかどうかを検出し、そのタイプを使用してのみ応答することで、name 属性の必要性を回避できます。(その後、Chrome が修正され、Firefox は IE を壊さずに修正されると思います)。

私はいくつかの css ソリューションで遊んで、Oli の提案を使用することになりました。シンプルでうまくいきました。

于 2010-06-20T07:20:51.393 に答える
-1

正直なところ、イメージ マップを作成している場合、誤った XHTML セマンティクスを使用している可能性があります。やろうとしていることを実際に投稿して、それらが実行可能な代替手段であるかどうかを確認する必要があります。

于 2009-01-19T15:12:57.530 に答える