Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Javascript Elemento a comparsa con un click
Postato da webmaster il Friday, 31 October @ 07:00:00 CET
Contributo di webmaster

Questo javascript molto semplice può essere utile per visualizzare con un click elementi e altre risorse che si desidera mantenere inizialmente nascosti. All'interno dell'elemento invisibile può essere incluso qualsiasi tipo di contenuto: testo, immagini, filmati multimediali o animazioni flash.

La sezione Javascript

Il codice jacascript va inserito nella sezione head della pagina:

<!-- INIZIO CODICE -->

<script type="text/javascript">
<!--
function scambio(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
}
-->
</script>

<!-- FINE CODICE -->

Lo script, come detto all'inizio, è molto semplice ma efficace. L'unica funzione presente, attivata dal link inserito nella pagina web, controllerà lo stato di visualizzazione dell'elemento associato (style.display) e lo cambierà: se lo stato è visibile lo renderà invisibile, se lo stato è invisibile lo renderà visibile.

Il nome dell'elemento da rendere visibile o invisibile è passato allo script dall'unica variabile che accetta (id) e lo si dovrà specificare al'interno della pagina web, come vedremo più avanti.

È possibile aggiungere tutte le risorse che si desidera anche se va precisato che il browser caricherà in memoria tutti gli elementi anche prima di visualizzarli. Lo script si limita solo a renderli visibili o invisibili. Ciò significa che se volessimo utilizzare lo script per una presentazione di fotografie in un'uica pagina, va precisato che l'utente dovrà attendere, prima di rendere operativa la pagina e i links, il caricamento di tutte le immagini, visibili e non visibili, incluse nella galleria.

Richiamo interno alla pagina web

Il seguente codice html fa riferimento per semplicitià a due soli elementi. Naturalmente se ne possono aggiungere a piacimento agendo sulla variabile del link e sul nome dell'ID.

Vediamo il codice, personalizzato utilizzando alcune proprietà comuni dei CSS. Esso andrà inserito naturalmente all'interno della sezione body della pagina web.

<!-- INIZIO CODICE -->

<!-- blocco 1 -->
<div style="width:400px; border-style: solid; border-color: #999999; border-width: 1px; text-align:left;">
<p><strong><a href="#" onclick="scambio('nome'); return false"><b>Link</b></a><br />
Il link va inserito in questo spazio. Può essere del testo o un'immagine.</strong></p>
</div>
<!-- blocco 1 -->

<!-- blocco 2 -->
<div id='nome' style="display:none; width:400px; border-style: solid; border-color: #999999; border-width: 1px; text-align:left;">
L'elemento da includere va inserito in questo spazio. Può essere del testo,
un'immagine, un'animazione flasch, del codice javascript o html.
</div>
<!-- blocco 2 -->

<!-- FINE CODICE -->

Come si può notare ogni contenuto è formato da due blocchi di elementi raggruppati dall'elemento <div>. Nel primo blocco è presente il link che attiverà la comparsa/scomparsa del successivo elemento, incluso nel secondo blocco. Per aggiungere nuovi elementi basterà seguire la sintassi mostrata nell'esempio ricordando di cambiare il nome del secondo blocco indicato nell'id e mutare di conseguenza anche la variabile passata allo script nel link presente nel primo blocco (scambio('id')).

L'elemento del secondo blocco viene nascosto al primo caricamento della pagina (proprietà 'display:none). Se si volesse renderlo visibile, e dunque lasciare all'utente la possibilità di nasconderlo, basterà eliminare il riferimento display:none dallo stile in linea.


 
Links Correlati
· Indice Javascript
· Inoltre Javascript
· News by webmaster


Articolo più letto relativo a Javascript:
Reload automatico della pagina

Valutazione Articolo
Average Score: 5
Voti: 2


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Javascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.05 Secondi

Theme by

© Oceanoweb