この投稿では次のことを学びます。
HTML イメージ マップとは
イメージ マップは、クリックできる領域を持つ画像です。 HTML でイメージ マップを作成するには、「 <地図> 」の要素が活かされています。さらに、1つ以上の「 <エリア> 」タグを「
構文
HTML ドキュメントでイメージ マップを指定する構文は次のとおりです。
< 画像 ソース = 「画像/img1.jpg」 すべての = 'ラップトップ' 使用マップ = 「#クリックスペース」 >
< 地図 名前 = 「クリックスペース」 >
< 範囲 形 = 「直角」 座標 = '224,37,422,312' href = 'ラップトップ.html' >
< / 地図 >
「 <画像> 」要素は、次の属性で定義されます。
- 「 ソース 」は画像パスを指定します。
- 「 すべての 」は、画像を読み込めない場合の代替テキストを示します。
- 「 使用マップ 」を指定して、画像領域をクリック可能にします。リンクを作成するには、その値が「
「 <地図> ” 要素が追加され、次の属性が追加されます。
- 「 形 ” は HTML の領域サイズを指定します “ <地図> ' エレメント。
- 「 座標 」属性は、クリック可能な領域の座標を定義します。
- 「 href 」属性は、ソースの URL を設定します。
HTML ドキュメントでイメージ マップを作成する方法
HTML ドキュメントでイメージ マップを作成するには、指定された手順を確認してください。
- HTML で、「 ”要素、そしてクラスを割り当てる” イメージマップ 」。
- この div 内に、「 <画像> 」要素を使用して、前述の属性に関連付けられた画像を追加します。
- 次に、HTML「 <地図> 」要素を割り当て、それに「 クリックスペース ' 名前。
- 「 使用マップ ” 属性には名前が割り当てられます “ #クリックスペース 」を指して「 名前 「
- その中に、「 <エリア> 」 上記の属性を持つタグ:
< 分周 クラス = 「イメージマップ」 >
< 画像 ソース = 「画像/img1.jpg」 すべての = 'ラップトップ' 使用マップ = 「#クリックスペース」 >
< 地図 名前 = 「クリックスペース」 >
< 範囲 形 = 「直角」 座標 = '224,37,422,312' href = 'ラップトップ.html' >
< / 地図 >
< / 分周 >画像のサイズを調整する CSS セクションに進みましょう。
CSS のスタイル「
」「を活用する .image-map 」にアクセスするためのクラス「
」要素を編集し、次の CSS プロパティを適用します。 .image-map {
幅 : 700px;
マージン: 車;
}上記の CSS プロパティの説明は次のとおりです。
- 「 幅 ” プロパティは div 要素の幅を設定します。
- 「 マージン 」プロパティは、要素の周りにより多くのスペースを追加します。
スタイル「img」要素
.image-map img {
幅 : 100 %;
}「 座標 」属性をクリックできるようになりました。
次のセクションでは、イメージ マップを別のソースにリンクする方法を学習します。
他のページにリンクされたイメージ マップを作成するには?
拡張子が「」の別の HTML ページを作成します。 .html 」 以下の手順に従ってください。
- 私たちの場合、「」という名前を付けます。 ラップトップ.html 」。
- div 要素を追加し、それにクラスを割り当てます “ ラップトップ画像 」。
- 次に、「 <画像> 」要素を関連付け、「 ソース ' と ' 幅 属性。
- 次に、「」を使用して段落を指定します。 ' エレメント：
< 画像 ソース = '/images/laptop.jpg' 幅 = 「400px」 >
< p >ラップトップは、移動してさまざまな設定で使用できるポータブル コンピューターです。 / p >
< / 分周 >CSS では、次の CSS プロパティを「 ラップトップ画像 ' クラス：
.laptop-img {
幅 : 500px;
マージン: 車;
}出力
次に、「 ラップトップ.html ” ページから画像へ” <エリア> 最初のページの要素。そのためには、ページの URL を「 href 以下に示すように、「 」要素の「」属性:
< 範囲 形 = 「直角」 座標 = '310,57,590,470' href = 'ラップトップ.html' >出力
イメージ マップとは何か、およびそれらが他のソースとどのようにリンクされているかを学習することに成功しました。
結論
HTML「 <地図> 」要素を使用して、イメージ マップまたはクリック可能な領域を含む画像を作成します。画像のクリック可能な領域を定義するには、1 つ以上の「 <エリア> 」タグは「