イメージマップエディタなしでイメージマップを構築する方法

イメージマップは単純なHTMLタグです

イメージマップは、あなたのWebサイトを活性化させるためのエキサイティングで興味深い方法です。イメージをアップロードして、そのイメージの一部を他のオンライン資産にクリック可能にすることができます。 ピンチでイメージ・マップ・エディタをダウンロードしたくない場合は、 HTMLタグを使用してマップを作成するのは簡単です。

画像、画像エディタ、 HTMLエディタやテキストエディタが必要です。 ほとんどの画像エディタでは、画像をポイントするとマウスの座標が表示されます。 この座標データは、イメージマップを始めるために必要なすべてのデータです。

イメージマップの作成

イメージマップを作成するには、まずマップの基礎となるイメージを選択します。 画像は「通常のサイズ」でなければなりません。つまり、ブラウザが拡大するほど大きな画像を使用しないでください。

イメージを挿入すると、マップの座標を識別する追加の属性が追加されます。

イメージマップを作成すると、イメージ上でクリック可能な領域が作成されるため、マップの座標は選択したイメージの高さと幅と一致する必要があります。 マップは3種類の図形をサポートしています:

エリアを作成するには、マッピングする特定の座標を分離する必要があります。 マップは、画像上の1つ以上の定義された領域で構成され、クリックすると新しいハイパーリンクを開きます。

四角形の場合は、左上と右下の角だけをマッピングします。 すべての座標はx、y(上、上)としてリストされます。 したがって、左上隅0,0と右下隅10,15については、0,0,10,15と入力します 。 それをマップに追加します:

<地図名= "babycats"> <エリア形状= "rect" coords = "0,0,10,15" href = "morris.htm" alt = "Morris">

ポリゴンの場合、各x、y座標を別々にマッピングします。 Webブラウザは自動的に最後の座標セットを最初の座標セットに接続します。 これらの座標内のものはマップの一部です。

"Garfield"

円の形には矩形のような2つの座標しか必要ではありませんが、2番目の座標では円の中心から半径または距離を指定します。 したがって、中心が122,122、半径が5の円の場合、122,122,5と書いてください:

"Catbert"

すべての領域と図形が同じマップタグに含まれている可能性があります。

"Morris"

考慮事項

イメージマップは、1990年代のWeb 1.0の時代の2000年代初めにはるかに一般的でした。イメージマップはしばしばウェブサイトのナビゲーションの基礎を形成しました。 デザイナーは、メニューアイテムを示すために何らかの画像を作成し、マップを設定します。

現代のアプローチは、レスポンシブなデザインを奨励し、カスケーディングスタイルシートを使用してページ上のイメージとハイパーリンクの配置を制御します。

HTMLタグではまだマップタグがサポートされていますが 、フォームファクタの小さいモバイルデバイスを使用すると、イメージマップで予想外のパフォーマンスの問題が発生する可能性があります。 さらに、帯域幅の問題または破損した画像は、画像マップの値を打ち消します。

したがって、この安定した、よく理解されているテクノロジーを使い続けることを自由にしてください。現在、Webデザイナーにはより効果的な選択肢があることを知っています。