imageObject.useMapは、image要素のuseMap属性の値を取得、もしくは、設定するプロパティ。
useMap属性には、画像に関連付けるイメージマップ（map要素）を指定できる。
構文
取得
var $useMap = $imageElementReference.useMap;
戻り値
image要素のuseMap属性の値。画像に関連付いているイメージマップ（map要素）の名前（name属性値）の最初に#を付加した文字列。
設定
$imageElementReference.useMap = "#イメージマップ名";
- #イメージマップ名
- 画像に関連付けるイメージマップ（map要素）の名前（name属性値）を
#に続けて指定。
サンプル
image要素のuseMap属性の値：
サンプルの動作について
- 「sampleMapA」ボタンをクリックすると、サンプル画像のuseMap属性を「#sampleMapA」にする。「image要素のuseMap属性の値：」の右横に「#sampleMapA」と表示する。サンプル画像の左半分をクリックすると、１つ前の画像を表示する。サンプル画像の右半分をクリックすると、１つ後の画像を表示する。
- 「sampleMapB」ボタンをクリックすると、サンプル画像のuseMap属性を「#sampleMapB」にする。「image要素のuseMap属性の値：」の右横に「#sampleMapB」と表示する。サンプル画像の上半分をクリックすると、１つ前の画像を表示する。サンプル画像の下半分をクリックすると、１つ後の画像を表示する。
- 画像の順番は、配列「$sampleImages」に格納した順番。最初の画像の表示中に１つ前の画像に切り替えようとすると、前の画像はないので、最後の画像に切り替わる。最後の画像の表示中に１つ後の画像に切り替えようとすると、後の画像はないので、最初の画像に切り替わる。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setUseMap( $useMap ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.useMap = $useMap;
var $useMap = $elementReference.useMap;
document.getElementById( "sampleOutput" ).innerHTML = $useMap;
}
function setSrc( $next ) {
var $sampleImages = [
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/2.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/4.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/5.jpg'
];
var $elementReference = document.getElementById( "sample" );
var $src = $elementReference.src;
var $currentIndex = $sampleImages.indexOf( $src );
var $nextIndex = $currentIndex + $next;
if( $nextIndex > $sampleImages.length - 1 ){ $nextIndex = $nextIndex - $sampleImages.length; }
if( $nextIndex < 0 ){ $nextIndex = $nextIndex + $sampleImages.length; }
$elementReference.src = $sampleImages[ $nextIndex ];
}
</script>
function setUseMap( $useMap ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.useMap = $useMap;
var $useMap = $elementReference.useMap;
document.getElementById( "sampleOutput" ).innerHTML = $useMap;
}
function setSrc( $next ) {
var $sampleImages = [
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/2.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/4.jpg',
'http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/5.jpg'
];
var $elementReference = document.getElementById( "sample" );
var $src = $elementReference.src;
var $currentIndex = $sampleImages.indexOf( $src );
var $nextIndex = $currentIndex + $next;
if( $nextIndex > $sampleImages.length - 1 ){ $nextIndex = $nextIndex - $sampleImages.length; }
if( $nextIndex < 0 ){ $nextIndex = $nextIndex + $sampleImages.length; }
$elementReference.src = $sampleImages[ $nextIndex ];
}
</script>
HTML
<div id="sampleWrap">
<p>
<button onclick="setUseMap('#sampleMapA');">sampleMapA</button>
<button onclick="setUseMap('#sampleMapB');">sampleMapB</button>
</p>
<p>image要素のuseMap属性の値：<span id="sampleOutput"></span></p>
<image src="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg" alt="サンプル画像" id="sample" useMap="#sampleMapA">
<map name="sampleMapA">
<area shape="rect" coords="0,0,150,198" onclick="setSrc(-1);" />
<area shape="rect" coords="150,0,300,198" onclick="setSrc(1);" />
</map>
<map name="sampleMapB">
<area shape="rect" coords="0,0,300,99" onclick="setSrc(-1);" />
<area shape="rect" coords="0,99,300,198" onclick="setSrc(1);" />
</map>
</div>
<p>
<button onclick="setUseMap('#sampleMapA');">sampleMapA</button>
<button onclick="setUseMap('#sampleMapB');">sampleMapB</button>
</p>
<p>image要素のuseMap属性の値：<span id="sampleOutput"></span></p>
<image src="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg" alt="サンプル画像" id="sample" useMap="#sampleMapA">
<map name="sampleMapA">
<area shape="rect" coords="0,0,150,198" onclick="setSrc(-1);" />
<area shape="rect" coords="150,0,300,198" onclick="setSrc(1);" />
</map>
<map name="sampleMapB">
<area shape="rect" coords="0,0,300,99" onclick="setSrc(-1);" />
<area shape="rect" coords="0,99,300,198" onclick="setSrc(1);" />
</map>
</div>