HTMLのエリアタグ

この記事では、HTML のエリアタグについて学びます。エリア タグは、イメージ マップ内のホットスポットを定義し、ハイパーテキスト参照と関連付けまたはリンクして、ユーザーが Web ページ上でクリックできるようにします。地図部分をクリックすると、さまざまなページにリンクするのに役立ちます。また、タグは、画像上に複数のリンクが必要な場合に役立ちます。

構文

基本的な構文を以下に示します:

<area alt="text" class=" " coords=" " shape> ;

ここでは、画像がレンダリングされない場合の代替テキストとして alt が使用されます。

• class: 要素のクラス名を定義します。
• coords: 形状の値のセットがあります。

イメージ マップの場合、構文は次のとおりです。

<img  src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" html name alt="HTMLのエリアタグ" >
<map name=" name">
<area shape="shapeName1" coords="x,y coordinates" href="html%20linkPath">
<area shape="shapeName2" coords=" x,y coordinates " href="htmllinkPath">
</map>

説明: これは終了タグのない空のタグですが、XHTML の場合は として宣言されます。そして、このエリアタグは常に

エリアタグは HTML でどのように機能しますか?

これを完了するためのプロセスは次のとおりです。最初は、イメージ マップ内のイメージです。

1. ページに画像を挿入するには、以下に示す画像タグを使用する必要があります:

<img src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" alt="HTMLのエリアタグ logo"> // image from the saved folder. Also, we can get from the web URL directly and map with <map> tag.</map>

これには src 属性が付属しています: 画像コンテンツを説明するソースと代替テキスト。

2. 次に、#map 属性を持つマップ要素を開きます。このイメージ タグには、use map の後に「#」記号が付いています (use map =” #map”)。マップ名は HTMLのエリアタグ と同じ名前である必要があります。

イメージマップを作成するには?イメージとマップを一緒にするには、map 属性と name 属性を一緒に使用します。ブラウザは、画面上のマウスカーソルがポインタ(手のマーク)になると、その図形の領域を認識します。

3. マップに使用される領域を宣言します。

<area shape="rect" cords='…….href="" ' alt="">
href comes with alt attribute by default.

属性

一般に、HTML タグには、ブラウザーに視覚的に快適に表示するのに役立つ 1 つ以上の属性があります。使用される属性には、グローバル属性、イベント処理属性、要素固有の属性の 3 種類があります。 area タグは、以下に示すタグ固有の属性とその説明を提供します。HTML 5 にはいくつかの新しい属性があります。

1.タグ固有の属性

属性の名前	説明	例
alt	指定された領域に代替テキストを定義して、アクセシビリティを向上させます。
href	ハイパー参照とは、ページの次のページ ポイント/URL へのリンクを意味します。領域をハイパーリンクに変更します。
形状	画像上で実行されるさまざまな形状を定義します。
座標	画像内の領域に適切な特定の値を与えます。座標は次のように指定されます: デフォルト: コードは必要ありません。 長方形: 左、上、右、下 円: x、y、半径 Poly: x1,y1, x2,y2,x3,y3…
target	Specifies where to open the link page, or I can say the end target page.
Nohref	Defines that absence of href. This means the area doesn’t have a link to next page
type	Specifies the content type (MIME)
hreflang	Specifies language-type

2. Standard Attributes

The description of these attributes has already been discussed in the previous article.

• Access key
• class
• dir
• id
• Style
• lang
• id
• tab index
• title.

3. Global Attributes

• onmouse down
• onmouse up
• onmouse over
• onmouse move
• onmouse out
• on focus
• on blur
• onkey press
• onkey down
• onkey up.

Examples to Implement Area Tags in HTML

Below are examples of implementing area tags in HTML:

Example #1

In the below example, I have created a jpg image diary.jpg. When u execute the code, the hand tool moves over the image at the specified cords; when you click on it, it directs you to the page rr.html.

Code:

<img  src="/static/imghw/default1.png" data-src="diary.jpg" class="lazy" html alt="HTMLのエリアタグ" >
<map name="Diary">
<area shape="rect" coords="94,91,189,193" href="rr.html">
</map>

Code: rr.html

hello

 Online tutorial Class

Output:

Example #2

Code:

<img class="logo lazy" src="/static/imghw/default1.png" data-src="edu.jpg" alt="HTMLのエリアタグ logo"    style="max-width:90%"  style="max-width:90%" html>
<map name="ccmap">
<area shape="rect" coords="89,9,294,50" href="sha.html" alt="HTMLのエリアタグ">
<area shape="rect" coords="297,7,407,54" href="rr.html" alt="Welcome">
</map>

Code: rr.html

hello

 Online tutorial Class

Code: sha.html

hello

 Welcome to the Page

Output:

The Output below shows the logo of HTMLのエリアタグ; clicking the word BA directs to the page Hello page.

Example #3

Code:

<img src="/static/imghw/default1.png" data-src="new.png" class="lazy" alt="HTMLのエリアタグ" border="0" html>
<map name="Protocols">
<area shape="Poly" coords="74,0,113,29,98,72,52,72,38,27" href="https://www.manageengine.com/network-monitoring/what-is-snmp.html%22" alt="SNMP Tutorial" target="_blank">
<area shape="rect" coords="22,83,126,125" alt="FTP Tutorial" href="https://www.techtarget.com/searchnetworking/definition/File-Transfer-Protocol-FTP" target="_blank">
<area shape="circle" coords="73,168,32" alt="http Tutorial" href="https://www.webopedia.com/TERM/H/HTTP.html" target="_blank">
</map>

Explanation of the above program: In this example, we have created an image map using the image file called new.png, which has three clickable areas declared within it using the tag. The first clickable area is a polygonal shape that links to the SNMP page called www.managengine.com. The second clickable area is a rectangular shape that links to the FTP page called www.searchnetworking.com, and finally, the last clickable area is a circle that links to an HTTP page called www.webopedia.com.

Output:

Output:

Conclusion

Therefore, we have seen how the area tag is used in active areas in switching to the pages with brief information explaining how to use the tag in clickable areas with syntax and demo examples.

以上がHTMLのエリアタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。