HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLマッピング画像

HTMLマッピング画像は、HTMLドキュメントのハイパーリンクとして機能するクリック可能な領域を備えたクライアント側の画像マップです。 マップ間の関係を作成するには およびimg HTML要素マップの名前属性 要素はimgusermap属性に関連付けられています。

構文

以下は構文です-

<img src=”” alt=”’ usemap=”#name_value”>
<map name=”name_value”>
<area shape=”” coords=”” href=”” alt=”’>
<area shape=”” coords=”” href=”” alt=”’>
</map>

HTMLマッピング画像の例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
   }
   img {
      width: 200px;
      height: 200px;
   }
</style>
</head>
<body>
<h1>HTML Mapping Image</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>Click on the above logo</p>
</body>
</html>

出力

HTMLマッピング画像

画像内のHadoopのロゴ部分（象）をクリックして、HTMLマッピング画像がどのように機能するかを確認します-

HTMLマッピング画像


  1. HTMLDOMスタイルborderImageRepeatプロパティ

    HTML DOM borderImageRepeatプロパティは、境界画像で画像スライスが繰り返される方法を定義するために使用されます。これは、borderImageを丸める、繰り返す、または引き伸ばす必要があるかどうかを設定または取得します。 構文 以下は、-の構文です。 borderImageRepeatプロパティを設定します。 object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit" 値 プロパティ値は次のように説明されます- Sr.No 値と説明 1 ス

  2. HTMLDOMスタイルフィルタープロパティ

    HTML DOMスタイルフィルタープロパティは、要素の視覚効果を定義するために使用されます。 以下は、-の構文です。 フィルタプロパティの設定- object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()" 上記のプロパティ値は次のように説明されます- フィルター 説明 なし これは効果を指定しま