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

JavaScriptで画像マップ領域の代替テキスト（alt属性）を取得する方法

JavaScriptで画像マップ（イメージマップ）の領域に設定された代替テキスト（altテキスト）を取得するには、altプロパティを使用します。<area>要素に対してaltプロパティを参照することで、その領域に設定されている代替テキストを簡単に読み取ることができます。

サンプルコード

以下のコードを実行すると、画像マップ領域の代替テキストを取得して表示できます。

<!DOCTYPE html>
<html>
   <body>
      <img 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 x = document.getElementById("myarea").alt;
         document.write("<br>Alternate Text: "+x);
      </script>
   </body>
</html>

コードの解説

このサンプルでは、次の手順で代替テキストを取得しています。

1. <img>要素のusemap属性によって、画像と<map>要素が関連付けられています。
2. <map>内の<area>要素には、円形のクリック領域（shape="circle"）と、代替テキストとして「Team」が設定されています。
3. document.getElementById("myarea")でidが「myarea」の<area>要素を取得し、.altプロパティを参照することで、代替テキスト「Team」を取り出しています。
4. 最後にdocument.write()を使って、取得した代替テキストを画面に出力しています。

なお、現代のWeb開発ではdocument.write()の代わりに、textContentやinnerHTMLを使って特定の要素に結果を表示する方法が推奨されます。また、アクセシビリティの観点からも、画像マップの各領域には必ず適切なalt属性を設定しておくことが重要です。

  1. JavaScriptでテキストのフォントサイズを設定する方法【fontSizeプロパティの使い方】

    JavaScriptでフォントサイズを設定するには、style.fontSizeプロパティを使用します。このプロパティに「px」「em」「%」などの値や「smaller」「larger」といったキーワードを指定することで、要素の文字サイズを動的に変更できます。 実装例 以下のコードでは、ボタンをクリックすると指定した段落（ID：myID）のフォントファミリーとフォントサイズが変更されます。 <!DOCTYPE html> <html> <body> <h1>見出し1</h1> <p id = myI

  2. JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】

    JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>