Come usare OnMouseOver in ASP.NET

September 3

Come usare OnMouseOver in ASP.NET


Quando gli utenti di Internet spostare i loro cursori oltre i controlli HTML regolari, i controlli possono cambiare il loro aspetto. Gli sviluppatori chiamano questo cambiamento un client-side "onmouseover" evento. Essa si verifica in browser di un utente e non richiede alcuna comunicazione con il server di un Web. Se sei uno sviluppatore ASP.NET, si possono trovare difficoltà a creare questo effetto OnMouseOver. controlli server ASP.NET non vengono eseguite nel browser di un utente. Essi devono comunicare con il server Web invece. È possibile superare questa limitazione e creare effetti onmouseover usando il metodo "Attributes.Add" di ASP.NET.

istruzione

1 Avviare Microsoft Visual Studio e caricare uno dei tuoi progetti ASP.NET che utilizza il linguaggio C # codifica.

2 Aggiungere due pulsanti al form di avvio; nome loro "Button1" e "Button2."

3 Incollare il seguente codice nel metodo "Page_Load" del modulo di avvio:

stringa mouseoverAttribute1 = "passaggio del mouse il testo";

stringa mouseoutAttribute1 = "mouseOut testo";

stringa mouseoverVal = controlName + ".value =" + " '" + mouseoverAttribute1 + "'";

stringa mouseoutVal = controlName + ".value =" + " '" + mouseoutAttribute1 + "'";

Button1.Attributes.Add ( "onmouseover", mouseoverVal);

Button1.Attributes.Add ( "onmouseout", mouseoutVal);

Le prime due righe definiscono il testo che appare quando il cursore del mouse si muove sopra "Button1" e il testo che appare quando il cursore si sposta lontano da quel controllo. Le prossime due linee uniscono il nome del pulsante con le variabili di testo per creare valori utilizzati negli ultimi due dichiarazioni. L'ultima dichiarazione aggiunge un evento "onmouseout" a "Button1" utilizzando il metodo "Attributes.Add". La dichiarazione davanti l'ultima istruzione aggiunge un "onmouseover" evento al pulsante.

4 Incollare il seguente codice sotto il codice mostrato Fase 3:

stringa controlName2 = "Button2";

stringa mouseoverAttribute2 = "punteggiata";

stringa mouseoutAttribute2 = "solido";

stringa mouseoverVal2 = controlName2 + ".style.borderStyle =" + " '" + mouseoverAttribute2 + "'";

stringa mouseoutVal2 = controlName2 + ".style.borderStyle =" + " '" + mouseoutAttribute2 + "'";

Button2.Attributes.Add ( "onmouseover", mouseoverVal2);

Button2.Attributes.Add ( "onmouseout", mouseoutVal2);

Questo blocco di codice è simile al codice visto nel passaggio precedente. Questo codice imposta onmouseover e onmouseout attributi per "Button2." Invece di cambiare il testo del pulsante, le ultime due affermazioni alterano lo stile del bordo del pulsante.

5 Eseguire il progetto premendo il tasto "F5". Il tuo browser lancia e si apre la pagina Web. La pagina contiene i due pulsanti.

6 Muovi il mouse sopra "Button1". Il suo testo cambia al testo definito nella variabile "mouseoverAttribute1". Muovi il mouse dal pulsante e il testo torna al suo valore originale.

7 Muovi il mouse sopra "Button2." Viene visualizzato un bordo tratteggiato intorno al pulsante perché è stato aggiunto un attributo border tratteggiata per il secondo pulsante nel codice. Muovi il mouse lontano dal "Button2." Il bordo punteggiato va via.

Consigli e avvertenze

  • Questo esempio modifica gli attributi di due pulsanti quando il mouse si muove sopra e lontano dai controlli. Il metodo "Attributes.Add" compie questo modificando proprietà del primo pulsante "innerText" e la proprietà "backgroundColor" del secondo tasto. Questi semplici proprietà CSS lavorano in ASP.NET nello stesso modo in cui lavorano nel codice HTML regolare. Una volta capito questi principi di base, è possibile aggiungere effetti mouseover ad altri controlli, come ad esempio le caselle di testo. Basta sostituire "Button2" - ovunque si vede nel codice - con il nome della casella di testo. Quando si apre la pagina Web e sposta il cursore del mouse sulla casella di testo, il suo confine cambierà, così come il bordo del tasto è cambiato in questo esempio. Per ulteriori informazioni su altri effetti di stile che è possibile applicare ai controlli, visitare un sito web che spiega JavaScript proprietà di stile.