HTML画像マップはまだ使用されていますか？

113

人々はまだ古いHTML画像マップを使用していますか？以下のもの：

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

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

html imagemap

— ss888
ソース

1

何か良い点があるかどうかを尋ねるときは、比較のための手段を提供する必要があります。どのように、またはどのような目的でより良いですか？私たちが自由に使えるイメージマップよりも強力なツールがありますが、もっと複雑です...

— Jeff Parker

2

良い点-私は長い間イメージマップを使用していなかったため、コード化の改善された方法によって置き換えられた可能性があると考えました。

— ss888 2011年

1

Javascript /レイヤーベースの機能、およびフラッシュは、私が遭遇したほぼすべてのイメージマップに取って代わりました...私が最後に現役で見たのを思い出せません。ただし、特定の目的を念頭に置いている場合は、より具体的な回答を簡単に入手できる可能性があります。：

— Jeff Parker

21

この日はFlashを避けたいですlol。

— ss888

4

すぐに実行でき、実行が速く、わずかに邪悪なものを探している場合は、イメージマップが役立ちます。私の心に同じ速度で仕事をする広くサポートされている交換はありません。さて、SVG、Canvasの時間があり、サポートされているブラウザのリストからIEを除外してもかまわない場合は

— Jeff Parker

53

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

— JohnP
ソース

わかりました、それでhtmlイメージマップはまだ良いですか？ホバー/ロールオーバー効果を追加するのはどうですか？

— ss888 2011年

イメージマップに関する私の主な問題は、関連付けられているイメージとは異なり、ブラウザや画面のサイズに合わせて拡大縮小されないことです。OPがSVG形式を研究することを願っています

— Martin

2

画像のサイズに合わせてスケーリングする必要があります。ウィンドウのサイズを基準に画像サイズを作成します。次に、常にその幅/高さの比率をイメージマップの比率と比較し、JavaScriptを使用して座標を上書きします。jqueryベースの画像サイズイベントハンドラーは$（window）.resize（function（）{.... yourcode ...}）;です。

— スキダドン2015

46

これらはHTML5仕様に含まれているため、廃止されることはありません。

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

— カパ
ソース

19

CSSまたはイメージマップを使用する別のソリューションは、HTML DOMに埋め込まれたSVGグラフィックを利用することです。

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

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

— ノーマンH
ソース

1

+1 SVGは、イメージマップの直接的な代替手段として最適です。これは、任意の形状の相互作用が可能なためです。SVG要素に画像の塗りつぶしを与えることにより、ベクトル座標がラスターピクセル画像を切り取る画像マップに非常に類似したものを作成できます。ただし、その場合でも、エリアマップの方が適している場合があります（これらのマップは単純で、画像をトリミングしないので、望ましい場合もあります）。

— user56reinstatemonica8 2013

18

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

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

— ロストリン
ソース

8

+1-CSSと絶対配置で多くのことを行うことができますが、イメージマップは、長方形以外のポリゴン領域でホバーを検出する唯一の方法です。

— Blazemonger、2011

10

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

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

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

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

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

— ダニエレB
ソース

9

はい、まだイメージマップを使用していますが、最後のプロジェクトではラファエルを使用しました。何かを稼働させるのは非常に簡単でした。

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

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

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

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

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

— デビッドニューコム
ソース

2

うめき声やダウン投票の代わりに自分でリンクを修正するのにそれほど時間はかからなかったでしょう:(

— David Newcomb

2

親愛なるデイビッド、私は反対投票を削除しました。単純に壊れているリンクをどのように修正しますか？私はhttp://raphaeljs.com/完全に削除し、Githubの例のみを提供します。

— orschiro 16

6

スタックサイトのポイントはコラボレーションです。リンクが壊れている場合は、可能であれば修正してください。壊れたリンクに関してそれを考えないでください、それらはリソースへの壊れたポインタです。リソースが移動した場合は、リソースの新しい場所を指すようにリンクを更新します。これは重要なことです。Raphaeljsは以前は独自のサイトを持っていましたが、明らかにGitHubに移動しました。現在住んでいる場所を見つけるために人々をGoogleに送り返すのでしょうか？それとも私たちは彼らがここから行くのを助けますか？オーストラリアの例は、どこか違うところに住んでいる同じ例です。

— David Newcomb

http://raphaeljs.com/ドメイン登録の有効期限が切れたときのリンクは最終的に解除されますが、再直接その上には、（世界で）誰もがそのリンクを更新する機会を与えることを今そこにあります。おそらく@orschiroは、記事の1つから始めて、SOでの共同作業に追加できます。

— David Newcomb

1

了解しました、Davidに感謝します！返信を更新してリンクを修正しました。:-)

— orschiro

4

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

**私はこのスレッドが古いことを知っています。最近のメールキャンペーンの問題についてこれについて追加の調査を行っていただけで、他の誰かの助けになると思っていました。

サードパーティ編集

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

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

イメージマップを使用すると、通常、配信可能性の問題を引き起こし、ダウンロード速度を妨げる可能性のある大きな画像が使用されます（特にモバイルユーザーにとって重要）。

そして最も重要なのは、iOS（iphone / ipad）は、画像が拡大縮小されてもリンクを壊すため、画像マップのリンク座標を拡大縮小しないことです。iOSはメールの開封の大部分を占めるため（iPhone + iPad = http://emailclientmarketshare.com/経由で38％）、これは重要です。

— スピンドル79
ソース

0

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

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

もっと

— スリクルシュナ
ソース

-2

イメージマップはhtmlおよびhtml5で非常に興味深いオプションであり、それらはまだ使用されており、私は個人的に気に入っています。そのため、モバイルデバイスで問題が発生していることが問題であり、スケーリングに関連しています。

はい、私は自分で体験しましたが、html html5に登録している学生です。初心者の場合は、w3choolsリンクをたどります。

http://www.w3schools.com/html/html_images.asp

あなたはこの[ページからたくさん得るでしょう

— ショウアイクバル
ソース