| ポイント |
<![CDATA[
iObj = document.images[iName].style;
if (iObj.visibility == "visible") iObj.visibility = "hidden"; else iObj.visibility = "visible";
]]>
|
| 説 明 |
クリックで画像の表示を切り替えるには、指定した画像の表示状態をスタイルシートプロパティvisibilityから読み出します。読み出した文字がvisibilityであればhiddenを設定し非表示にします。読み出した文字がhiddenであればvisibleを設定し表示します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックで画像の表示／非表示を切り替える</title>
<script language="JavaScript"><!--
function shImg(iName)
{
iObj = document.images[iName].style;
if (iObj.visibility == "visible") iObj.visibility = "hidden"; else iObj.visibility = "visible";
}
// --></script>
</head>
<body>
<img src="image.jpg" name="myIMG1" style="position:static;visibility:visible">
<a href="javaScript:shImg('myIMG1')">表示切り替え</a><br>
<img src="image.jpg" name="myIMG2" style="position:static;visibility:visible">
<a href="javaScript:shImg('myIMG2')">表示切り替え</a><br>
<img src="image.jpg" name="myIMG3" style="position:static;visibility:visible">
<a href="javaScript:shImg('myIMG3')">表示切り替え</a><br>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックで画像の表示／非表示を切り替える