web-dev-qa-db-ja.com

HTMLイメージマップはまだ使用されていますか?

人々はまだ古いHTMLイメージマップを使用していますか?次のものがあるもの:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

または、より新しい、より良い代替手段はありますか?

112
ss888

はい、人々はまだイメージマップを使用しています。別の方法は、絶対配置とCSSを使用して要素を配置することですが、それは必ずしも良いとは限りません。また、イメージマップのような形状にすることもできません。

52
JohnP

これらはHTML5仕様にあります なので、廃止されません。

あなたはまだ自由にそれらを使用することができます、彼らは確かにまだウェブ開発で彼らの場所を持っています。または、イメージマップを使用して何かを最もよく解決できるまれな機会が存在すると言うこともできます。

45
kapa

CSSまたはイメージマップを使用する別の解決策は、HTML domに埋め込まれたSVGグラフィックを使用することです。

このテクニックを使用してマウスオーバー効果を実現する方法に関するチュートリアルの1つは、このチュートリアルで説明されています。 http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

重要なポイントは、SVG要素がonmouseoveronmouseoutなどの従来のdomイベントもトリガーすることです。

18
Norman H

はい。特に、エリアをポリゴンにしたい場合は、htmlイメージマップが適しています。 JavaScriptを使用して、ロールオーバー効果をマップに追加することもできます。ここに素敵なチュートリアルとデモがあります:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

17
LostLin

画像マップは、すべてのブラウザでサポートされているHTML5仕様のままです。

JQuery RWDイメージマップを使用して、レスポンシブデザインに適合させることができます。 https://github.com/stowball/jQuery-rwdImageMaps

イメージマップの座標を検出し、自動的にサイズを変更します。

プラグインとしてWordpress開発者にも利用可能です: http://wordpress.org/plugins/responsive-image-maps/

シンプルで効果的なソリューション。

11
Daniele B

はい、まだイメージマップを使用していますが、最後のプロジェクトではRaphaëlを使用しました。何かを実行するのはとても簡単でした。

http://dmitrybaranovskiy.github.io/raphael/

彼らのウェブサイトから:

Raphaël['ræfeɪəl]は、SVG W3C勧告とVMLをグラフィック作成のベースとして使用しています。つまり、作成するグラフィカルオブジェクトはすべてDOMオブジェクトでもあるため、JavaScriptイベントハンドラーを添付したり、後で変更したりできます。 Raphaëlの目標は、ベクターアートと互換性のあるクロスブラウザを簡単に描画できるアダプターを提供することです。

素敵なシンプルなイメージマップの例:

http://dmitrybaranovskiy.github.io/raphael/australia.html

8
David Newcomb

最近のWebサイトで使用されることはほとんどありませんが、クライアントがメールキャンペーンで使用しているようです。しかし、私は気づきました、そして、 確認済み モバイルデバイスの座標系にいくつかのスケーリングの問題があることを。

**私はこのスレッドが古いことを知っています。最近の電子メールキャンペーンの問題についてこれについて追加調査を行ったところ、他の誰かに役立つかもしれないと考えました。

サードパーティ編集

Litmus.comの質問 イメージマップサポート は2014年4月からです

一部のクライアントでは、イメージが読み込まれない場合、イメージマップはALTタグをサポートしません。ALTテキストは表示されません。

イメージマップを使用すると、一般的に大きな画像が使用されるため、配信の問題が発生し、ダウンロード速度が低下する可能性があります(モバイルユーザーにとって特に重要)。

そして最も重要なことは、iOS(iphone/ipad)は、リンクが壊れて画像が拡大縮小されるときに、画像マップのリンク座標を拡大縮小しないことです。 iOSは大多数のメールを開きます(iPhone + iPad = http://emailclientmarketshare.com/ で38%)。これは重要です。

5
spindle79

はい、まだ使用されています

イメージマップを使用すると、ユーザーはイメージのさまざまな部分をクリックして多くのページにハイパーリンクすることができます。イメージマップを使用するだけで、同じイメージの特定の領域に関連する座標のリストを作成し、ハイパーリンクを別の場所に指定できます。これを単一の画像内で使用することにより、複数のリンクを提供します。

その他

0
Srikrushna