October 6
Quando si progetta un sito web, è possibile modificare l'aspetto di un elemento, ad esempio un collegamento o un'immagine, quando il visitatore si libra il suo mouse sopra l'elemento. Ci sono diversi metodi che alterano la base Hyper Text Markup Language che crea l'elemento per fornire un'esperienza diversa per il visitatore. È possibile aggiungere uno stato personalizzato per la barra di stato, un suggerimento o modificare più caratteristiche di stile dell'elemento di catturare l'attenzione del visitatore al passaggio del mouse.
1 Aprire la pagina web che si desidera modificare nel vostro editor di testo o HTML.
2 Aggiungere un attributo title per gli elementi che si desidera visualizzare una descrizione comandi al passaggio del mouse.
<Img src = "image.gif" title = "Breve descrizione">
In questo esempio "Breve descrizione" è uno stand per il testo che si desidera visualizzare al passaggio del mouse.
3 Salvare il file aprendo il menu "File" e scegliere "Salva".
4 Aprire il documento HTML che si desidera modificare nel vostro editor.
5 Creare un collegamento HTML, compreso il codice JavaScript, per produrre un messaggio di barra di stato al passaggio del mouse:
<a href="URL" onMouseOver="window.status='Description'; tornare true"> link </a>
6 Change "URL" per l'indirizzo del sito, "Descrizione" per il messaggio che si desidera visualizzare nella barra di stato e "Link" per il nome del collegamento.
7 Salvare il documento.
8 Aprite il vostro editor di testo e caricare il documento HTML che si desidera aggiornare.
9 Digita il codice HTML per l'elemento di base a cui si desidera aggiungere un effetto mouseover, con l'aggiunta di una classe CSS.
<a href="http://domain.com" class="mouseover"> link </a>
L'URL, nome della classe e link di testo nell'esempio di cui sopra sono sostituti per i tuoi valori effettivi.
10 Creare una sezione CSS tra i tag di apertura e chiusura della testa (</ head> <head e) nel documento. La sezione inizierà con <style type = "text / css"> e terminare con </ style>
11 Scrivi la CSS per modificare il vostro elemento al passaggio del mouse.
.mouseover: hover {color: blue; sfondo: bianco; text-decoration: line-through; }
In questo esempio ".mouseover" indica un elemento con il nome della classe di "mouseover". Se si cambia il nome della classe, è necessario modificare questo nome nel CSS. Le proprietà sono circondate da parentesi e separate da un punto e virgola. La proprietà, come "colore" e valore, ad esempio "blu" devono essere separati da una virgola.
Quando il visitatore si libra sopra il link, vedrà testo blu con una linea attraverso di essa su uno sfondo bianco.
12 Salvare il documento.