areaObject.altは、area要素(エリア要素)のalt属性の値を取得、もしくは、設定するプロパティ。
alt属性には、マップ画像を表示できない場合の代替テキストを指定することができる。
構文
取得
var $alt = $areaElementReference.alt;
戻り値
area要素(エリア要素)のalt属性の値。
設定
$areaElementReference.alt = 代替テキスト;
- 代替テキスト
- マップ画像を表示できない場合に代わりに使用するテキストを指定。
サンプル
変更後のalt属性の値:
サンプルの動作について
- 「サンプルarea要素A」ボタンをクリックすると、赤い丸のarea要素のalt属性値を「サンプルarea要素A」に設定する。「変更後のalt属性の値:」の右横に「サンプルarea要素A」と表示する。
- 「サンプルarea要素B」ボタンをクリックすると、赤い丸のarea要素のalt属性値を「サンプルarea要素B」に設定する。「変更後のalt属性の値:」の右横に「サンプルarea要素B」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setAlt( $alt ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.alt = $alt;
var $alt = $elementReference.alt;
document.getElementById( "sampleOutput" ).innerHTML = $alt;
}
</script>
function setAlt( $alt ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.alt = $alt;
var $alt = $elementReference.alt;
document.getElementById( "sampleOutput" ).innerHTML = $alt;
}
</script>
HTML
<div>
<img src="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-area-sample.png" alt="サンプル" usemap="#sampleMap">
<map name="sampleMap">
<area id="sample" shape="circle" coords="100,75,50" href="http://alphasis.info/" target="_blank" alt="サンプルarea要素" />
</map>
</div>
<p>
<button onclick="setAlt('サンプルarea要素A');">サンプルarea要素A</button>
<button onclick="setAlt('サンプルarea要素B');">サンプルarea要素B</button>
</p>
<p>変更後のalt属性の値:<span id="sampleOutput"></span></p>
<img src="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-area-sample.png" alt="サンプル" usemap="#sampleMap">
<map name="sampleMap">
<area id="sample" shape="circle" coords="100,75,50" href="http://alphasis.info/" target="_blank" alt="サンプルarea要素" />
</map>
</div>
<p>
<button onclick="setAlt('サンプルarea要素A');">サンプルarea要素A</button>
<button onclick="setAlt('サンプルarea要素B');">サンプルarea要素B</button>
</p>
<p>変更後のalt属性の値:<span id="sampleOutput"></span></p>