画像中の各部分をマウスオーバー時に円、四角などで囲んで説明する

 jq_maphilightモジュールを使うと、画像中の部分を説明がよりビジュアルに表現できます。

下記写真中、りんご、目、口の3ヶ所に指定してあります。




jq_maphilight利用手順

  1. 管理セクション≫サイトの構築≫モジュールでJQuery Map Hilightモジュールを有効化。
  2. 管理セクション≫サイトの環境設定≫JQuery Map Hilightで概ね以下のように設定(詳細は好み)。

 jq_maphilightの応用

  1. 記念写真: http://demo.joannmelnik.com/node/3
  2. チャート: http://demo.joannmelnik.com/node/2
  3. 地図:
    http://davidlynch.org/js/maphilight/docs/demo_usa.htm
    http://davidlynch.org/js/maphilight/docs/demo_world.html