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

JavaScriptでクライアントサイドのイメージマップを作成する方法

JavaScriptを活用すると、クライアントサイドのイメージマップを簡単に作成できます。クライアントサイドのイメージマップは、<img />タグに付与するusemap属性によって有効になり、実際のクリック領域(ホットスポット)は、<map>タグと<area>タグという専用のタグで定義します。

マップの元になる画像は、通常の画像とまったく同じように<img />要素でページに挿入します。異なるのは、usemapという属性を追加する点だけです。この属性の値には、「#」記号に続けて、後述の<map>要素のname属性と同じ値を指定します。

サンプルコード

以下のコードを実行して、クライアントサイドのイメージマップの動作を確認してみましょう。

<html>
   <head>
      <title>Using JavaScript Image Map</title>
      <script type="text/javascript">
         <!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
         //-->
      </script>
   </head>
   <body>
      <form name="myform">
         <input type = "text" name = "stage" size = "20" />
      </form>

      <!-- Create Mappings -->
      <img src="/images/usemap.gif" alt="HTML Map" border="0" usemap="#tutorials"/>
         
      <map name="tutorials">
         <area shape="poly"
            coords="74,0,113,29,98,72,52,72,38,27"
            href="/perl/index.htm" alt="Perl Tutorial"
            target="_self"
            onMouseOver="showTutorial('perl')"
            onMouseOut="showTutorial('')"/>

         <area shape="rect"
            coords="22,83,126,125"
            href="/html/index.htm" alt="HTML Tutorial"
            target="_self"
            onMouseOver="showTutorial('html')"
            onMouseOut="showTutorial('')"/>

         <area shape="circle"
            coords="73,168,32"
            href="/php/index.htm" alt="PHP Tutorial"
            target="_self"
            onMouseOver="showTutorial('php')"
            onMouseOut="showTutorial('')"/>
      </map>
   </body>
</html>

コードのポイント解説

shape属性でクリック領域の形状を指定する
<area>タグのshape属性には、「rect」(長方形)、「circle」(円形)、「poly」(多角形)の3種類から選択できます。上の例では、多角形・長方形・円形の3つすべてを使い分けています。

coords属性で座標を指定する
coords属性の書き方は、shapeの種類によって異なります。長方形の場合は「左上x, 左上y, 右下x, 右下y」、円形の場合は「中心x, 中心y, 半径」、多角形の場合は「各頂点のx, y座標」を順番にカンマ区切りで指定します。

JavaScriptと連携してインタラクティブにする
onMouseOverイベントとonMouseOutイベントを組み合わせることで、マウスカーソルがリンク領域に入ったとき・離れたときに、任意のJavaScript関数を呼び出せます。このサンプルでは、カーソルが各領域に乗ると、フォーム内のテキストボックスに対応するチュートリアル名(perl、html、phpなど)が表示される仕組みになっています。

  1. CSSとJavaScriptで作るモーダル式画像ギャラリーの実装方法

    CSSとJavaScriptを組み合わせれば、サムネイル画像をクリックすると拡大画像がポップアップ表示される「ライトボックス型」の画像ギャラリーを簡単に実装できます。この記事では、実際に動作するサンプルコードをもとに、その仕組みと実装のポイントをわかりやすく解説します。完成イメージページ上に並べた複数のサムネイル画像をクリックすると、モーダルウィンドウが開いて拡大画像が表示されます。右上の「×」ボタンをクリックするとモーダルが閉じる、シンプルながら実用的なギャラリーです。サンプルコード以下が、CSSとJavaScriptを使ってモーダル式画像ギャラリーを作成するコード例です。HTML・CSS・

  2. JavaScriptでシンタックスハイライトを作成・使用する方法をわかりやすく解説

    JavaScriptでシンタックスハイライト（構文強調表示）を作成して使用するには、正規表現とDOM操作を組み合わせるのが一般的です。ここでは、ページ内のリンク（アンカータグ）を自動的に検出し、スタイルを適用して強調表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <style>     body {         font-family: "Segoe