Skip to main content

Dreamweaverを使用してイメージマップを作成する方法

インラインフレームのHTMLタグを簡単作成! (六月 2026)

インラインフレームのHTMLタグを簡単作成! (六月 2026)
Anonim

多くのサイトで「イメージマップ」と呼ばれる機能を使用していたウェブデザインの歴史の中で、ポイントがありました。これは、ページ上の特定のイメージに付けられた座標のリストです。これらの座標は、その画像上にハイパーリンク領域を作成します。グラフィックには「ホットスポット」を追加する必要があります。それぞれの領域は、異なる場所にリンクするようにコーディングすることができます。これは画像にリンクタグを追加するだけではなく、グラフィック全体が1つの宛先への大きなリンクになることとは大きく異なります。

例:米国のイメージを持つグラフィックファイルがあるとします。各状態を「クリック可能」にして特定の状態に関するページに移動するようにするには、イメージマップを使用します。同様に、音楽バンドの画像がある場合は、イメージマップを使用して、個々のメンバーをそのバンドメンバーに関する後続のページにクリック可能にすることができます。

有用な画像マップはありますか?彼らは確かにそうだったが、今日のWeb上では好意を失ってしまった。これは、少なくとも部分的には、イメージマップが特定の座標を必要とするためです。今日のサイトは、画面やデバイスのサイズに基づいて応答性と画像の縮尺が構築されています。つまり、イメージマップの動作方法であるプリセット座標は、サイトの縮尺が変わってイメージのサイズが変わると分解されます。このため、今日のプロダクションサイトではイメージマップはほとんど使用されませんが、デモやページのサイズを強制するインスタンスには利点があります。

イメージマップを作成する方法、具体的にはDreamweaverで作成する方法を知りたいですか?このプロセスは特に難しいことではありませんが、どちらも簡単ではないので、始める前にいくつかの経験が必要です。

入門

始めましょう。あなたが取る必要がある最初のステップは、Webページに画像を追加することです。次に、画像をクリックして強調表示します。そこから、プロパティメニューに移動する必要があります(3つのホットスポット描画ツールのいずれかをクリックする必要があります:矩形、円、またはポリゴン。プロパティバーで行うことができるイメージの名前を忘れないでください。それはあなたが欲しいものです。例として "地図"を使用してください。

これらのツールの1つを使用して、イメージに必要な図形を描画します。長方形のスポットが必要な場合は、長方形を使用します。サークルと同じです。より複雑なホットスポット形状が必要な場合は、ポリゴンを使用します。これは、ポリゴンがポイントを落とし、非常に複雑で不規則なシェイプをイメージに作成できるので、米国地図の例で使用する可能性が高いです

ホットスポットのプロパティウィンドウで、ホットスポットがリンクするページを入力するか、参照します。これがリンク可能な領域を作成します。マップが完了し、追加するすべてのリンクが追加されるまで、ホットスポットを追加し続けます。

作業が完了したら、イメージマップをブラウザで見直して正しく動作することを確認してください。各リンクをクリックして、適切なリソースまたはWebページに移動するようにします。

イメージマップの短所

もう一度、イメージマップには、上記のレスポンシブウェブサイトのサポートの欠如の外でも、いくつかの欠点があることに注意してください。第1に、小さな細部が画像マッ​​プにおいて不明瞭になることがある。例えば、地理的な画像地図は、ユーザの出身国を特定するのに役立つかもしれないが、これらの地図は、ユーザの出身国を特定するのに十分詳細ではないかもしれない。つまり、イメージマップは、ユーザーがアジアにいるのかどうかを判断するのに役立ちますが、特にカンボジアから来たものではありません。

イメージマップの読み込みにも時間がかかることがあります。ウェブサイトの各ページで使用するには余裕があるため、ウェブサイトで複数回使用するべきではありません。 1ページに画像マップが多すぎると、ボトルネックが深刻になり、サイトのパフォーマンスに大きな影響を与えます。

最後に、視覚的な問題を持つユーザーがアクセスできるイメージマップは簡単ではありません。イメージマップを使用した場合は、代わりにこれらのユーザー用に別のナビゲーションシステムを作成する必要があります。

ボトムライン

デザインのデモやその仕組みをまとめてみるときには、時にはイメージマップを使用してください。たとえば、モバイルアプリのデザインをモックアップしていて、イメージマップを使用してホットスポットを作成してアプリのインタラクティブ性をシミュレートする場合などです。これは、アプリケーションをコーディングしたり、HTMLやCSSを使って現在の標準に基づいて作成されたダミーのWebページを構築するよりもはるかに簡単です。しかし、それらをプロダクションサイトやアプリに入れるのは非常に手間がかかり、今日のウェブサイトでは避けるべきです。