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

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

画像要素に設定された usemap 属性の値をJavaScriptで取得したい場合は、useMap プロパティを使用します。このプロパティは、対象の画像がどのイメージマップ（<map> 要素）に関連付けられているかを文字列として返します。

以下のコードを実行すると、画像の usemap 属性の値を画面に表示できます。

サンプルコード

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

コードの解説

1. 画像とイメージマップの定義

<img> 要素には id="myid" と usemap="#html" が設定されており、同じドキュメント内にある name="html" の <map> 要素と関連付けられています。マップ内の <area> 要素は、クリック可能な円形領域（shape="circle"）を定義しています。

2. useMapプロパティによる値の取得

document.getElementById("myid") で画像要素を取得し、その useMap プロパティを参照することで、#html という値が取得できます。取得した値は document.write() を使ってページに出力されます。

実行結果

Usemap: #html

補足：より現代的な書き方

document.write() は現在では非推奨とされるため、実際の開発では textContent や console.log() を使って結果を表示するのが一般的です。

const img = document.getElementById("myid");
console.log(img.useMap); // 結果: #html

また、getAttribute("usemap") メソッドを使っても同様に属性値を取得できます。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでリンクのtarget属性の値を取得する方法

    JavaScriptでリンク（<a>要素）のtarget属性の値を調べるには、targetプロパティを使用します。target属性は、リンク先をどこに表示するか（同じタブ、新しいタブなど）を指定するための属性で、このプロパティを参照するだけでその値を簡単に取得できます。 サンプルコード 次のコードでは、getElementById()メソッドでリンク要素を取得し、targetプロパティの値を画面に表示しています。 <!DOCTYPE html> <html>    <body>       <

  2. JavaScriptで背景画像のサイズを設定する方法をわかりやすく解説

    JavaScriptで背景画像のサイズを設定するには、backgroundSizeプロパティを使用します。このプロパティはCSSのbackground-sizeに相当し、要素の背景画像の表示サイズを動的に変更することができます。backgroundSizeプロパティとはbackgroundSizeプロパティでは、ピクセル値（px）やパーセンテージ（%）、さらには「cover」や「contain」などのキーワードを使って、背景画像のサイズを柔軟に指定できます。ボタンのクリックなど、ユーザーの操作に応じて背景画像の大きさを変えたい場合に便利です。サンプルコード以下のコードでは、ボタンをクリックする