April 30
Se hai mai visto un pulsante su un sito web che cambia forma quando il cursore si trova su di esso, allora probabilmente avete visto un effetto "Mouseover" utilizzando JavaScript. Javascript, da non confondere con il linguaggio di programmazione Java, è un linguaggio di scripting semplice per le pagine Web. La possibilità per javascript per memorizzare e recuperare le variabili permette effetti unici quando il mouse passa sopra un elemento, inclusi i pulsanti.
Il più delle volte, javascript è impegnata dalla definizione "OnMouseOver" all'interno di un tag link.
<A href = "mysite.com" onmouseover = "
Questo attributo sarà effettivamente coinvolgere il codice JavaScript si scrive per i pulsanti o può identificare direttamente la nuova immagine. Poiché la maggior parte i pulsanti nelle pagine Web sono in realtà piccoli file di immagini, è possibile creare molti effetti diversi utilizzando due immagini diverse, una per il pulsante normale e l'altro per il pulsante "Mouseover".
Oggi, molti navigatore include il codice javascript necessario integrare la "OnMouseOver" e "onmouseout", che restituisce il pulsante al suo stato originale dopo il mouse ha lasciato, senza JavaScript aggiuntivo. Per fare questo, inserire la frase "documento. [ItemName] .src = [percorso]" dopo il "... oltre" e "... fuori" gli attributi. Il "[ItemName]" è sostituito con il valore dell'attributo ID nel tag immagine che si desidera rotolato sopra. Ad esempio, document.mine.would correlare a un tag di immagine <img src = mypicture.jpg id = mia>. La "location" è la directory in cui il MouseOver o il file mouseout siede. Se questo è il stessa directory del file HTML in cui viene scritto il codice, allora solo il nome del file è necessario.
Questo tipo di codice può essere ingombrante se si desidera numerosi effetti rollover. Per semplificare il processo, è possibile scrivere una funzione javascript e semplicemente chiamare quella funzione con una variabile numero o una stringa. Posizionare il JavaScript nell'intestazione del file HTML e racchiuderlo all'interno di <script> tag. Il " 'nome' function ()" - dove 'name' è un qualsiasi nome univoco si sceglie - può quindi essere chiamato in OnMouseOver del tag <A> o onmouseout attributi. Ad esempio, <A HREF="webpage.html" onmouseover="MyOver()" onmouseout="MyOut()>. " Se si utilizzano le variabili, è possibile creare uno script che cerca automaticamente l'immagine e la sua MouseOver corrispondente equivalente. Ad esempio, lo script potrebbe cercare un file di immagine "[variabile] _on.jpg" quando OnMouseOver è attivato e "[variabile] _off.jpg" quando OnMouseOff è attivato. Poi il tag avrebbe solo chiamare "onmouseover = 'myout ([variabile])'", al fine di essere attivato. Le immagini associate sarebbero, ovviamente, devono essere chiamato come "[variabile] _on.jpg" e "[variabile] _off.jpg" - "[variabile]" è, naturalmente, un testo unico o di una stringa numerica si sceglie .
I ribaltamenti in ultima analisi, scendono a come si mestiere delle immagini per visualizzare il pulsante. Alcuni effetti comuni includono rendendo teh originale pulsante "glow", come si posiziona su di esso. effetti più vecchi fatto un tasto in rilievo dall'aspetto apparire come se fosse stato depresso. Questi effetti utilizzano diverse immagini, creati con il software di editing grafico. E 'importante che tutti questi file di immagini sono le stesse dimensioni esatte, altrimenti la pagina Web potrebbe diventare distorta su ogni ribaltamento.