イメージマップを使用する利点と欠点
多くのサイトで「イメージマップ」と呼ばれる機能を使用していたウェブデザインの歴史の中で、ポイントがありました。 これは、ページ上の特定のイメージに付けられた座標のリストです。 これらの座標は、その画像上にハイパーリンク領域を作成します。グラフィックには「ホットスポット」を追加する必要があります。それぞれの領域は、異なる場所にリンクするようにコーディングすることができます。 これは画像にリンクタグを追加するだけではなく、グラフィック全体が1つの宛先への大きなリンクになることとは大きく異なります。
例 - アメリカのイメージを持つグラフィックファイルを想像してください。 各状態を「クリック可能」にして特定の状態に関するページに移動するようにするには、イメージマップを使用します。 同様に、音楽バンドの画像がある場合は、イメージマップを使用して、個々のメンバーをそのバンドメンバーに関する後続のページにクリック可能にすることができます。
有用な画像マップはありますか？ 彼らは確かにそうだったが、今日のWeb上では好意を失ってしまった。 これは、少なくとも部分的には、イメージマップが特定の座標を必要とするためです。 今日のサイトは、画面やデバイスのサイズに基づいて 応答性と画像の縮尺 が構築されています 。 つまり、イメージマップの動作方法であるプリセット座標は、サイトの縮尺が変わってイメージのサイズが変わると分解されます。 このため、今日のプロダクションサイトではイメージマップはほとんど使用されませんが、デモやページのサイズを強制するインスタンスには利点があります。
イメージマップを作成する方法、具体的にはDreamweaverで作成する方法を知りたいですか？ 。 このプロセスは特に難しいことではありませんが、どちらも簡単ではないので、始める前にいくつかの経験が必要です。
入門
始めましょう。 あなたが取る必要がある最初のステップは、Webページに画像を追加することです。 次に、画像をクリックして強調表示します。 そこから、プロパティメニューに移動する必要があります（3つのホットスポット描画ツールのいずれかをクリックする必要があります：矩形、円、またはポリゴン。プロパティバーで行うことができるイメージの名前を忘れないでください。それはあなたが欲しいものです。例として "地図"を使用してください。
これらのツールの1つを使用して、イメージに必要な図形を描画します。 長方形の斑点が必要な場合は、矩形を使用してください。 サークルと同じです。 より複雑なホットスポット形状が必要な場合は、ポリゴンを使用します。 これは、ポリゴンがポイントを落とし、非常に複雑で不規則なシェイプをイメージに作成できるため、米国のマップの例で使用する可能性が高いものです
ホットスポットのプロパティウィンドウで、ホットスポットがリンクするページを入力するか、参照します。 これは、そのリンク可能な領域を作成するものです。 マップが完了し、追加するすべてのリンクが追加されるまで、ホットスポットを追加し続けます。
作業が完了したら、イメージマップをブラウザで確認し、正しく動作することを確認します。 各リンクをクリックして、適切なリソースまたはWebページに移動するようにします。
イメージマップの短所
もう一度、イメージマップには、上記のレスポンシブウェブサイトのサポートの欠如の外でも、いくつかの欠点があることに注意してください。 ファー、小さな細部はイメージマップで隠されるかもしれません。 例えば、地理的な画像地図は、ユーザの出身国を特定するのに役立つかもしれないが、これらの地図は、ユーザの出身国を特定するのに十分詳細ではないかもしれない。 つまり、イメージマップは、ユーザーがアジアにいるのかどうかを判断するのに役立ちますが、特にカンボジアから来たものではありません。
イメージマップの読み込みにも時間がかかることがあります。 彼らは、Webサイトの各ページで使用するにはあまりにも多くのスペースを占めるため、Webサイト上で複数回使用するべきではありません。 1ページに画像マップが多すぎると、ボトルネックが深刻になり、 サイトのパフォーマンスに大きな影響を与えます 。
最後に、視覚的な問題を持つユーザーがアクセスできるイメージマップは簡単ではありません。 イメージマップを使用した場合は、代わりにこれらのユーザー用に別のナビゲーションシステムを作成する必要があります。
ボトムライン
私は、デザインのデモやその仕組みをまとめようとしているときに、時々イメージマップを使用します。 たとえば、モバイルアプリのデザインを模索するかもしれないし、イメージマップを使ってホットスポットを作成してアプリのインタラクティブ性をシミュレートしたいと思う。 これは、アプリケーションをコーディングするよりも、HTMLやCSSを使って現在の標準に基づいて作成されたダミーのWebページを作成するよりもはるかに簡単です。 この特定の例では、どのデバイスをデザインするかを知り、そのデバイスにコードを拡張することができるため、イメージマップは機能しますが、それらをプロダクションサイトやアプリに配置することは非常に難しく、今日のウェブサイト
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：9/7/17