Home Page Home Page Tips & Tricks Creare un effetto mouseover con Javascript e ASP.NET

Creare un effetto mouseover con Javascript e ASP.NET


I controlli offerti da ASP.NET per la costruzione di tabelle per la rappresentazione di dati (i più usati Repeater, DataGrid, DataList) sono molto avanzati a livello architetturale ma poi è lasciato allo sviluppatore il compito di estenderli ulteriormente per adattarli alle esigenze dei vari progetti.

Visto che i browser si sono nel tempo evoluti e man mano allineati a livello di features offerte (Firefox, Internet Explorer, Opera) è ora possibile con poca difficoltà creare effetti grafici efficaci nelle pagine Web ASP.NET ma più in genere pagine HTML in modo da aumentare l'interattività dell'utente con le nostre applicazioni.

Uno degli effetti che utilizzo più spesso è il mouseover (passaggio del mouse) sulle righe di una tabella in modo che si colorino diversamente durante il passaggio. E' possibile realizzare questa funzionalità sia utilizzando i CSS che in Javascript. Mostreremo in questo caso la soluzione con Javascript utilizzando solo parzialmente i CSS e il DOM.

Quello di cui abbiamo bisogno è una semplice tabella in HTML:

<table width="100%" border="1">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>




Diciamo subito che durante il passaggio sulle varie righe (rows) della tabella scattano due eventi che sono:

- onmouseover (quando il mouse entra nella riga e si muove)
- onmouseout (quando il mouse esce dalla riga)

Noi andiamo a gestire questi eventi, modifichiamo intanto la tabella come segue:

<table width="100%" border="1">
<tr onmouseover="javascript:Color(this)" onmouseout="javascript:Decolor(this)"><td>1</td></tr>
<tr onmouseover="javascript:Color(this)" onmouseout="javascript:Decolor(this)"><td>2</td></tr>
<tr onmouseover="javascript:Color(this)" onmouseout="javascript:Decolor(this)"><td>3</td></tr>
</table>


Siamo andati infatti a gestire i due eventi per ogni riga. Ora è necessario sviluppare il codice delle funzioni Javascript Color e Decolor. La parola this è un puntatore alla riga corrente ossia la riga su cui è posizionato il mouse.

<script language="Javascript">
function Color(t)
{t.style.background='Gray';
}

function Decolor(t)
{t.style.background='White';
}
</script>


Il codice qui sopra è molto banale e non fa altro che impostare lo stile background a Gray (grigio) durante il mouseover e a White (Bianco) durante il mouseout. Aprendo la pagina noterete ora che al passaggio del mouse sulle righe si coloreranno di grigio come previsto.


Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5