第66回 「画像を表示/非表示にする」


 今回はマウスイベントに応じて画像を表示/非表示するプログラムについて説明します。
表示するかしないかもスタイルシートを使います。以下のようにvisibilityを使って指定します。

visibility:表示方法

表示方法は

visible ... 表示する
hidden .... 表示しない

を指定することができます。JavaScriptで指定する場合には以下のように書きます。

document.getElementById(オブジェクト名).style.visibility

 表示したい場合には文字列として"visible"を代入します。非表示にする場合にも同様に文字列として"hidden"を代入します。
 実際のプログラムは以下のようになります。

<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
visibility:show;
}
--></style>
<script language="JavaScript"><!--
function showImage(obj)
{
document.getElementById(obj).style.visibility = "visible";
}
function hideImage(obj)
{
document.getElementById(obj).style.visibility = "hidden";
}
// --></script>
</head>
<body>
<a href="#" onMouseover="showImage('myIMG')">画像を表示する</a>
<br>
<a href="#" onMouseover="hideImage('myIMG')">画像を非表示にする</a>
<br>
<img src="photo1.jpg" id="myIMG">
</body>
</html>


 もう少し工夫して引数に表示する、しないを指定すると、より簡潔なプログラムになります。

<html>
<head>
<title></title>
<style type="text/css"><!--
#myIMG {
visibility:show;
}
--></style>
<script language="JavaScript"><!--
function showHideImage(obj,dType)
{
document.getElementById(obj).style.visibility = dType;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="showHideImage('myIMG','visible')">画像を表示する</a>
<br>
<a href="#" onMouseover="showHideImage('myIMG','hidden')">画像を非表示にする</a>
<br>
<img src="photo1.jpg" id="myIMG">
</body>
</html>


 これまではユーザーの反応によって位置を変更したり画像を表示/非表示しました。しかし定期的に移動したり点滅させたりしたい場合もあります。
 次回は画像を定期的に点滅させてみます。




2002-2004 Copyright KaZuhiro FuRuhata (古籏一浩)