14 marzo 2009

Rendere Visibile un'Immagine Tramite Javascript

Creare un effetto "mostra-nascondi" tramite un piccolo script Javascript, e la modalità CSS Display.

Esempio del markup html:

<html>
<head>

<title>views Image</title>
<script src="evento_load.js"></script>


</head>
<body>
<p><a href="#" onclick="show_image('jaunty');">Click per vedere o nascondere l'immagine!</a></p>
<div id="jaunty" style="display: none;">
<p><img src="jaunty.jpg"></img></p>
</div>
</body>

</html>


E lo script javascript che dopo avere impostato il <div>come display:none, invia l'<id jaunty> alla funzione show_image che essendo none, lo imposta come stringa vuota, che reimposta a display:none.

function show_image(targetId)

{

if (document.getElementById)

{
target = document.getElementById(targetId);

if (target.style.display == "none")

{
target.style.display = "";
}

else

{
target.style.display = "none";
}

}

}

Ecco la pagina prima dell' evento onclick :

















E Dopo:





Nessun commento: