6.4. Elemek láthatósága
Egy dokumentum elemeit láthatóvá tehetjük vagy elrejthetjük a visibility tulajdonság állításával. Ennek értelemszerűen két lehetséges értéke van:
visible (látható), illetve hidden (rejtett). A felhasználó valamilyen vezérlőn keresztül ki-/be kapcsolhatha egy elem láthatóságát.
A következő példa egy képet jelenít meg, a felhasználó pedig egy gomb segítségével eltűntetheti, illetve ismét láthatóvá teheti a képet (az eseménykezelőt egy külön állományban
tároltuk):
<![CDATA[
<?xml version = "1.0" encoding = "utf-8" ?>
<!IDOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<!-- showHide.html
showHide.js állományt használja
elemek láthatóságának változtatását mutatja be
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Láthatósag </title>
<script type="text/javascript" src="showHide.js">
</script>
</head>
<body>
<form>
<div id="picture" style="position: relative;
visibility: visible;">
<img src="images/sample2.jpg"/>
</div>
<p>
<br />
<input type="button" value="Megmutat/Elrejt"
onclick = "flipImage()" />
</p>
</form>
</body>
</html>
// showHide.js
// elemek láthatóságának vezérlését mutatja be
// eseménykezelő ami a kép láthatóságát változtatja
function flipImage()
{
dom = document.getElementById("picture").style;
if (dom.visibility == "visible")
{
dom.visibility = "hidden";
}
else
{
dom.visibility = "visible";
}
}
]]>
A 6.5 ábra a showHide.html dokumentumot jeleníti meg