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