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

JavaScriptでusemap属性の値を取得する方法をわかりやすく解説

JavaScriptで画像のusemap属性の値を取得したい場合は、useMapプロパティを使用します。このプロパティを使うことで、HTML要素に設定されたイメージマップの参照先を簡単に読み取ることができます。

usemap属性とは？

usemap属性は、クライアントサイドイメージマップを有効にするために<img>タグに指定される属性です。イメージマップ自体は、特殊な<map>タグと<area>タグによって定義されます。

マップとして利用する画像は、通常どおり<img>要素を使ってページに挿入します。ただし、通常の画像とは異なり、usemapという追加の属性を指定する点が特徴です。この属性の値には、対応する<map>要素のname属性（「#」を付けて指定）を記述します。

usemap属性の値を取得するサンプルコード

以下のコードを実行すると、画像に設定されたusemap属性の値を取得して表示できます。

<!DOCTYPE html>
<html>
  <body>
    <img id="myid" src="/images/html.gif" alt="HTML Map" border="0" usemap="#html"/>
    <map name="html">
      <area id="myarea" shape="circle" coords="154,150,59" href="about.htm?id=company" alt="Team" target="_self">
    </map>
    <script>
      var myVal = document.getElementById("myid").useMap;
      document.write("<br>Usemap値: " + myVal);
    </script>
  </body>
</html>

コードのポイント

  • document.getElementById()で対象の画像要素を取得します。
  • 取得した要素のuseMapプロパティを参照すると、「#html」という形式でマップ名が返されます。
  • この例ではdocument.write()で結果を出力していますが、実際の開発ではtextContentなどを使った表示方法が推奨されます。

このように、useMapプロパティを活用すれば、JavaScriptからイメージマップの設定内容を動的に確認・操作することが可能になります。

  1. JavaScriptで画像のuseMap属性の値を取得する方法

    画像要素に設定された usemap 属性の値をJavaScriptで取得したい場合は、useMap プロパティを使用します。このプロパティは、対象の画像がどのイメージマップ（<map> 要素）に関連付けられているかを文字列として返します。以下のコードを実行すると、画像の usemap 属性の値を画面に表示できます。サンプルコード<!DOCTYPE html> <html>    <body>       <img id = "myid" src = "/imag

  2. JavaScriptで文字列のプリミティブ値を取得する方法｜valueOf()の使い方を解説

    JavaScriptにおけるプリミティブ型とはJavaScriptには、undefined・null・boolean（真偽値）・string（文字列）・number（数値）の5つのプリミティブ型が存在します。これら以外の値は、すべてオブジェクトとして扱われます。boolean、string、numberの各プリミティブ型は、それぞれBoolean、String、Numberというコンストラクタから生成される「ラッパーオブジェクト」で包む（ラップする）ことが可能です。そして、ラッパーオブジェクトから元のプリミティブ値を取り出したい場合には、そのオブジェクトに対してvalueOf()メソッドを呼び