サンプルを修正しました（2013年4月）

このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。
ご迷惑をおかけした方々、申し訳ございませんでした。
解決のソースを送信してくださった中村様、ありがとうございました！！

以前のソースはこちら。
ロールオーバーで japan2.gif に変化し、クリックで japan3.gif に変わるというものでした。

<script>
$(document).ready(function ()
{
	$('#shape1').mapster({
	singleSelect : true,
	render_highlight : { altImage : 'image/japan2.gif' },
     mapKey: 'region',
	fill : true, altImage : 'image/japan3.gif',
	fillOpacity : 1,
});
});
</script>
</body>

今回のソースはこちら。
リンクするには、6行目の「clickNavigate : true」が必要でした。
リンク先へ飛ぶと、クリック後に変化する japan3.gif は不用なので使用しません。

<script>
$(document).ready(function ()
{
	$('#shape1').mapster({
	singleSelect : true,
	clickNavigate : true,
	render_highlight : { altImage : 'image/japan2.gif' },
	mapKey: 'region',
	fillOpacity : 1,
});
});
</script>
</body>

「ImageMapster」の詳しい使い方は、このあと↓

このサンプルのHTMLソース

以下は要所の抜粋です。（HTMLソース全体は、ブラウザの「ページのソース」などで確認してください）

<!DOCTYPE html>
<html lang="ja">
<head>
<!--略-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/jquery.imagemapster.js"></script>
</head>
<body>
<p>
<img src="image/japan1.gif" alt="日本地図" usemap="#shape1" id="shape1">
</p>

<map name="shape1">
  <area shape="poly" coords="<!--略-->" href="#" alt="北海道" region="hokkaido">
  <area shape="poly" coords="<!--略-->" href="#" alt="東北" region="tohoku">
  <!--略（ area要素で全てのエリアを指定します）-->
</map>

<script>
$(document).ready(function ()
{
	$('#shape1').mapster({
	singleSelect : true,
	clickNavigate : true,
	render_highlight : { altImage : 'image/japan2.gif' },
	mapKey: 'region',
	fillOpacity : 1,
});
});
</script>
</body>

「ImageMapster」の使い方

「ImageMapster」サイトで、「jquery.imagemapster.js」をゲット。
または、このサイトの「ド初心者用（absolute beginners）」ページで「zip archive」をダウンロードすると、
「scripts」フォルダの中に「jquery.imagemapster.js」が入ってます。ここからゲットしたほうが簡単。分かりやすい解説もあります。

★このサンプルは、ビギナーズファイルの5番目（beginner5.htm）のソースを参考にしています。
　（=Linking to an external page/website.（他のページやサイトへのリンク））
ゲットしたファイルを「js」など任意の名前を付けたディレクトリ（フォルダ）に保存。
<head>内に、下記の2行を入れて、外部 JavaScriptファイルを読み込む。（HTML5）
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/jquery.imagemapster.js"></script>
```
1行目は、「jQuery」を読み込んでいます。
jQueryサイトでダウンロードして自分のサーバ上に置いても良いのですが、上の方法は、googleが提供しているサービスで、 jQuery を google経由で読み込む方法。
注意：jQueryの最新バージョン(2013年10月) は 2.0.3 ですが、新しいバージョンだと
「ImageMapster」は動作しませんでした。ver.1.8.xまで。（上記1行目の指定が最適です）
2行目は、先ほどダウンロードして保存した「jquery.imagemapster.js」のURLを指定します。
イメージマップ用の画像を2つ用意します。
1つめは、ロールアウト用。平常時の画像。（サンプルでは japan1.gif）
2つめは、ロールオーバー用。ハイライトさせた画像です。（サンプルでは japan2.gif）
平常時（ロールアウト時）の画像をHTML上に配置します。
```
<img src="image/japan1.gif" alt="日本地図" usemap="#shape1" id="shape1">
```
usemap属性でイメージマップの名前を指定。 id属性でid名も指定します。idは後で使うので必須。
（ここでは id名をイメージマップ名と同じにしましたが、別に何でもOKです。）
イメージマップを作ります。（イメージマップの詳細は「ほんっとにはじめてのHTML5」に）
```
<map name="shape1">
  <area shape="poly" coords="" href="#hokkaido" alt="北海道" region="hokkaido">
  <area shape="poly" coords="" href="#tohoku" alt="東北" region="tohoku">
  


  <area shape="rect" coords="132,30,209,48" href="#hokkaido" alt="北海道" region="hokkaido">
  <area shape="rect" coords="132,58,209,76" href="#tohoku" alt="東北" region="tohoku">
  
</map>
```
「mapkey (マップキー)」というキーワードを決めます。（ここでは region にしています）
各<area>で、その値を指定します。（ここでは hokkaido など各地方の名称を値にしています）
同じマップキーの値を指定すれば、複数のエリアでも、ロールオーバーで同じ効果が得られます。
このサンプルのリンク領域は「地図の部分」と「テキストだけの部分」があり、同じ地域には同じマップキーを指定しています。
JavaScript を<body>内に書きます。どこに置いても動くんだけど、やっぱり一番下（</body>の直前）がいいみたい。
```
<script>
$(document).ready(function ()
{
	$('#shape1').mapster({
	singleSelect : true,
	clickNavigate : true,
	render_highlight : { altImage : 'image/japan2.gif' },
	mapKey: 'region',
	fillOpacity : 1,
});
</script>
```
4行目に、<img>につけたid名（ここではイメージマップと同じ名前の shape1 にしました）を書きます。コレ重要。
（5行目の singleSelect : true は無くてもいいみたい。一応本家のサンプルのとおりに書いときました）
6行目の、clickNavigate を true に。これでクリックするとリンク先に飛びます。
7行目は、ハイライト時の画像のURLを指定します。（ここでは image/japan2.gif ）
8行目に、先ほど指定した「mapkey (マップキー)」を指定。コレ重要。（ここでは region にしています）
9行目の fillOpacity はロールオーバー時に乗っかる画像（ハイライト画像）の透明度です。
1で100％、0で0％。半透明にしたいのなら、0.5（50％）などと指定します。コレ便利。

ほんっとにはじめてのHTML5とCSS3
サンプル：[61] イメージマップ

jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる

サンプルを修正しました（2013年4月）

このサンプルで使用している画像

このサンプルのHTMLソース

「ImageMapster」の使い方