Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Gestione passaggio del mouse con jQuery

Scritto da Fare-internet il 21 maggio 2010 condividi condividi

In questo post andremo velocamente a vedere come si possono gestire gli eventi generati dal passaggio del mouse su un oggetto tramite jQuery.

Per prima cosa possiamo andare a vedere questo esempio:

http://demo.studio-88.it/eventi-mouse-jquery.html

possiamo vedere che il testo contenuto nel box cambia se ci andiamo sopra col mouse e ricambia quando usciamo dal box stesso, dicendoci se siamo sopra o no.

Ora andiamo ad analizzare i vari pezzi di codice, trattandosi di jQuery per prima cosa dobbiamo includere lo script necessario, questa volta lo prenderemo direttamente da google, che lo rende disponibile per gli utenti che ne hanno bisogono, quindi dentro l’head della nostra pagina scriveremo:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>


Per rendere la viusalizzazione del nostro box un po’ più carina andiamo a definire una regola css per il box:

#box{
        border:7px solid #030;
        padding:5px;
        background-color:#060;
        width:400px;
        height:50px;
        color:#FFF;
}

Ora agginugiamo all’interno dal tag body il box definito, come si capisce dal foglio di stile il box dovrà avere l’attributo id=”box”:

<div id="box">Fuori</div>

Ora con poche righe di codice definiamo i cambiamenti che devono avvenire nella pagina:

<script>
$("#box").mouseover(function(){
        $("#box").html("Dentro");
});

$("#box").mouseout(function(){
        $("#box").html("Fuori");
});
</script>

Ora possiamo analizzare il codice.

$(“#box”).mouseover()

è il pezzo di codice che farà qualcosa quando si passerà sopra con il mouse all’oggetto con id box,
quello che deve fare è definito all’interno delle parentesi di mouseover, nel coso specifico stiamo esguendo il codice:

$(“#box”).html(“Dentro”);

In pratica non fa altro che sotiutuire l’html all’interno del tag con id box con la scritta Dentro.

Del tutto analogo è il codice:

$(“#box”).mouseout(function(){
$(“#box”).html(“Fuori”);
});

che all’uscita del mouse dal box riscriverà al suo interno Fuori

Twitter