イメージマップは、あなたのWebサイトを活性化させるためのエキサイティングで興味深い方法です。イメージをアップロードして、そのイメージの一部を他のオンライン資産にクリック可能にすることができます。ピンチでイメージ・マップ・エディタをダウンロードしたくない場合は、HTMLタグを使用してマップを作成するのは簡単です。
画像、画像エディタ、HTMLエディタやテキストエディタが必要です。ほとんどの画像エディタでは、画像をポイントするとマウスの座標が表示されます。この座標データは、イメージマップを始めるために必要なすべてのデータです。
イメージマップの作成
イメージマップを作成するには、まずマップの基礎となるイメージを選択します。画像は「通常のサイズ」でなければなりません。つまり、ブラウザが拡大するほど大きな画像を使用しないでください。
イメージを挿入すると、マップの座標を識別する追加の属性が追加されます。
イメージマップを作成すると、イメージ上でクリック可能な領域が作成されるため、マップの座標は選択したイメージの高さと幅と一致する必要があります。マップは3種類の図形をサポートしています：
- rect - 長方形または四角形
- 多角形または多角形
- 円 - 円
エリアを作成するには、マッピングする特定の座標を分離する必要があります。マップは、画像上の1つ以上の定義された領域で構成され、クリックすると新しいハイパーリンクを開きます。
のために 矩形 、あなたはちょうど左上と右下のコーナーをマップします。すべての座標はx、y（上、上）としてリストされます。したがって、左上隅0,0と右下隅10,15には、次のように入力します。 0,0,10,15。それをマップに追加します：
のために ポリゴン 、あなたはそれぞれをマップする x、y 別々に調整してください。 Webブラウザは自動的に最後の座標セットを最初の座標セットに接続します。これらの座標内のものはマップの一部です。
サークル 図形は四角形のような2つの座標しか必要としませんが、2番目の座標では円の中心からの半径または距離を指定します。したがって、中心が122,122、半径が5の円の場合、122,122,5と書いてください：
すべての領域と図形が同じマップタグに含まれている可能性があります。
考慮事項
イメージマップは、1990年代のWeb 1.0時代の2000年代初頭には、イメージマップがWebサイトのナビゲーションの基盤を形成することが多い。デザイナーは、メニューアイテムを示すために何らかの画像を作成し、マップを設定します。
現代のアプローチは、レスポンシブなデザインを奨励し、カスケーディングスタイルシートを使用してページ上のイメージとハイパーリンクの配置を制御します。
HTMLタグではまだマップタグがサポートされていますが、フォームファクタの小さいモバイルデバイスを使用すると、イメージマップで予想外のパフォーマンスの問題が発生する可能性があります。さらに、帯域幅の問題または破損した画像は、画像マップの値を打ち消します。
だから、この安定した、よく理解されたテクノロジーを使い続けてください。現在、より効率的な選択肢があることを知っています。 アン・ヴォーグ Webデザイナーと一緒に。
