HTMLのタグの使い方を詳しく解説

Jun 19, 2017 pm 03:26 PM
html 使用 について ラベル

1、エリアタグ: 画像マップ内のアクションエリアを分割します。このタグを通じて、画像マップ内にアクションエリア(ホットスポットとも呼ばれます)を設定できるため、ユーザーがマウスを指定した場所に移動したときに、アクションエリアを選択して をクリックすると、位置決め用のプリセットページに自動的にリンクされます。
2、 area> タグ: 分割するエリアはイメージ マップのエリア内である必要があるため、 タグを使用してエリアを分割する前に、別の HTML タグ を使用する必要があります。イメージ マップの影響範囲を指定し、指定されたイメージ マップの名前を設定します。

基本的な構文構造は次のとおりです:

<area    
class=type    
id=Value     
href=url     
alt=text     
shape=area-shape     
coods=value>
ログイン後にコピー

shape と coords: は、ホットスポットの形状とサイズを設定するために使用される 2 つの主要なパラメーターです。その基本的な使用法は次のとおりです。

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。
ログイン後にコピー

<エリア> マークはイメージ マップ内のアクションの領域を分割するため、分割するアクションの領域はイメージ マップの領域内にある必要があります。エリアを分割する前に マークを使用する必要があります。このタグの使用法は非常に簡単です。 <マップ名="イメージマップ名"> ....

以下は、これら 2 つのタグの使用法を示す例です:

これは新しい本棚の 写真です。その効果は次のとおりです。書籍「Website Directory」をクリックすると、新しいウィンドウが表示されます。開き、この書籍に関する はじめに と注文 Web ページ (urlall.htm) を表示します。書籍「Web サイト デザイン ガイド」をクリックすると、新しいウィンドウが開き、この書籍に関する

はじめに

と注文 Web ページが表示されます。 book (urlall.htm) siteall.htm); 書籍「Web ページ スキル エンサイクロペディア」をマウスでクリックすると、新しいウィンドウが開き、書籍の紹介と注文 Web ページ (pagejqlall.htm) が表示されます。作成方法: 画像を挿入し、画像の関連パラメータを設定し、 タグにパラメータ usemap="newbook" ismap を設定して、

画像マップ (newbook) への参照を示します

;

<マップ> マークを使用して、イメージ マップの効果範囲を設定し、名前を付けます: newbook;

<エリア> を使用して、3 つの本の位置に対応する 3 つの長方形の領域を分割します。そしてリンクパラメータ href を設定します。

1    <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">     
2    <map name="newbook">     
3    <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">     
4    <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">     
5    <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">     
6    </map>
ログイン後にコピー
この記事で紹介するエフェクトを作成する際に注意すべき点:

タグ内に usemap パラメータと ismap パラメータを設定することを忘れないでください。usemap のパラメータ値は同じである必要があります。 タグの name パラメータ値として、つまり、「イメージ マップ名」が一貫している必要があります。

同じ「イメージ マップ」内のすべてのホットスポット領域がイメージ マップの範囲内にある必要があります。つまり、すべての タグは の間になければなりません。

で設定されたアクション エリアの形状と一致する必要があります。形状パラメータを設定し、形状パラメータで設定した四角形のアクションエリアには出現しないようにし、コード内では多角形エリアの頂点の座標が に設定されてしまう現象が発生します。 🎜

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles