objectObject.useMapプロパティ

投稿日: 2014年2月19日 作成者: alphasis

objectObject.useMapは、埋め込みオブジェクト（object要素）のuseMap属性の値を取得、もしくは、設定するプロパティ。

useMap属性には、埋め込みオブジェクト（object要素）に関連付けるイメージマップ（map要素）を指定できる。

構文

取得

var $useMap = $objectElementReference.useMap;

戻り値

object要素のuseMap属性の値。object要素に関連付いているイメージマップ（map要素）の名前（name属性値）の最初に#を付加した文字列。

設定

$objectElementReference.useMap = "#イメージマップ名";
#イメージマップ名
object要素に関連付けるイメージマップ（map要素）の名前（name属性値）を#に続けて指定。

サンプル

object要素のuseMap属性の値：

お使いのブラウザはobject要素に対応していません。

サンプルの動作について

  • 「sampleMapA」ボタンをクリックすると、サンプルのobject要素のuseMap属性を「#sampleMapA」にする。「object要素のuseMap属性の値：」の右横に「#sampleMapA」と表示する。サンプルのobject要素に表示した画像の左半分をクリックすると、１つ前の画像を表示する。サンプルのobject要素に表示した画像の右半分をクリックすると、１つ後の画像を表示する。
  • 「sampleMapB」ボタンをクリックすると、サンプルのobject要素のuseMap属性を「#sampleMapB」にする。「object要素のuseMap属性の値：」の右横に「#sampleMapB」と表示する。サンプルのobject要素に表示した画像の上半分をクリックすると、１つ前の画像を表示する。サンプルのobject要素に表示した画像の下半分をクリックすると、１つ後の画像を表示する。
  • object要素に表示する画像の順番は、配列「$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 setData( $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 $data = $elementReference.data;
    var $currentIndex = $sampleImages.indexOf( $data );
    var $nextIndex = $currentIndex + $next;
    if( $nextIndex > $sampleImages.length - 1 ){ $nextIndex = $nextIndex - $sampleImages.length; }
    if( $nextIndex < 0 ){ $nextIndex = $nextIndex + $sampleImages.length; }
    $elementReference.data = $sampleImages[ $nextIndex ];
}
</script>

HTML

<div id="sampleWrap">
    <p>
        <button onclick="setUseMap('#sampleMapA');">sampleMapA</button>
        <button onclick="setUseMap('#sampleMapB');">sampleMapB</button>
    </p>
    <p>object要素のuseMap属性の値：<span id="sampleOutput"></span></p>
    <object data="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg" id="sample" useMap="#sampleMapA">
        <p>お使いのブラウザはobject要素に対応していません。</p>
    </object>
    <map name="sampleMapA">
        <area shape="rect" coords="0,0,150,198" onclick="setData(-1);" />
        <area shape="rect" coords="150,0,300,198" onclick="setData(1);" />
    </map>
    <map name="sampleMapB">
        <area shape="rect" coords="0,0,300,99" onclick="setData(-1);" />
        <area shape="rect" coords="0,99,300,198" onclick="setData(1);" />
    </map>
</div>

スポンサード リンク

カテゴリー: DOM, JavaScript, Objectオブジェクト, リファレンス パーマリンク