Potete usare JavaScript per accedere e cambiare gli attributi del vostro elemento CSS-P. In realtà, parte della sintassi differisce tra Netscape 4.0 e Internet Explorer 4.0. Ho studiato personalmente queste differenze, vi mostrerò un modo semplice per creare i Cross-browser JavaScript - gli script che funzioneranno sia in N4 sia in IE4.
Al momento sto usando ns4 e ie4 per indicare i due browser anziché n e ie
Partiamo dall'inizio: dobbiamo capire come verificare quale browser il nostro lettore sta usando. Queste due righe di codice rimarranno invariate per quasi tutti gli esempi di questo tutorial:
ns4 = (document.layers)? true:false ie4 = (document.all)? true:false
L'oggetto document.layers è peculiare per Netscape 4.0, mentre document.all lo è per IE 4.0. Cosicché controllando se l'oggetto esiste possiamo creare la variabile ns4 (per Netscape 4.0) e ie4 (per Internet Explorer 4.0) e assegnar loro l'attributo true o false in dipendenza da quale browser è in uso. D'ora in poi quando sarà necessario controllare quale browser è attivo dovete solamente utilizzare una if (ns4) oppure if (ie4):
function check() { if (ns4) { // fa qualcosa in Netscape Navigator 4.0 } if (ie4) { // fa qualcosa in Internet Explorer 4.0 } }
Poniamo di avere una tag di tipo DIV che assomigli a questa:
<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30;"> <IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0> </DIV>
Ricordatevi che questo è un esempio, potete rinominare blockDiv in qualsiasi modo vogliate e lavorerà sempre nello stesso modo.
Per Netscape il metodo generale per accedere alle proprietà del CSS-P è di questo tipo:
document.blockDiv.propertyNameo
document.layers["blockDiv"].propertyName
Per Internet Explorer invece:
blockDiv.style.propertyNameo
document.all["blockDiv"].style.propertyName
Dove propertyName può essere una qualsiasi delle proprietà del CSS-P: ad esempio left, top, visibility, zIndex oppure width.
Ho scoperto che il modo migliore per costruire cross-browser script è di avere una variabile, che dipenda dal browser presente, la quale punti direttamente sia al document.blockDiv sia al blockDiv.style, vedi l'esempio qui sotto. Chiameremo queste variabili pointer variables.
if (ns4) block = document.blockDiv if (ie4) block = blockDiv.styleVedete, dopo averlo fatto, potete accedere agli attributi usando una scorciatoia. Per esempio se vi riferite alla coordinata left della DIV chiamata "blockDiv", scriverete semplicemente:
block.leftNon interessa quale browser venga usato, per Netscape, block punta a document.blockDiv, e in IE, block punta a blockDiv.style.
Nota: In questo tutorial le mie tag DIV avranno desinenza "Div" (squareDiv, blockDiv etc.). Questo perché quando inizializzate un layer usando il metodo della pointer variable dovete scegliere un nome per la variabile che sia unico - non può essere lo stesso nome che avete utilizzato altrove. Ho, in questo modo, stabilito uno standard, facendo così in maniera tale che tutti i layer che devono essere inizializzati tramite la pointer variable automaticamente devono avere "Div" come desinenza, mentre la variabile puntatore sarà semplicemente il nome del layer senza la desinenza. Questo permette di ridurre il numero di battute poiché, fra poco lo capirete, finirete per utilizzare il nome della variabile molte più volte che il nome del layer stesso. |
Questo esempio apre un messaggio sugli attributi left, top e visibility di un elemento CSS-P.
Lo script:
<SCRIPT LANGUAGE="JavaScript"> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style } //--> </SCRIPT>L'HTML:
<BODY onLoad="init()"> <A HREF="javascript:alert(block.left)">left</A> - <A HREF="javascript:alert(block.top)">top</A> - <A HREF="javascript:alert(block.visibility)">visibility</A> <DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30; visibility:visible;"> <IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0> </DIV> </BODY>Cliccate qui per vedere l'esempio
Importante: richiamo la funzione init() nel BODY onLoad="" cosicché venga eseguita dopo che la rimanente parte della pagina è stata caricata. Questo perché quando viene definita la vostra pointer variable, la DIV deve già esistere. Se provate a definire la variabile prima che la pagina abbia completato il caricamento riceverete un messaggio di errore quale "block is not defined" [block non è stato definito]. |
Se aprite sia Netscape sia IE e provate l'ultimo esempio noterete che non otterrete gli stessi valori.
Proprietà | Valore di N4 | Valore di IE4 |
left | 50 | 50px |
top | 100 | 100px |
visibility | show | visible |
Home | Prossima Lezione: Mostrare e Nascondere |