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

jQuery: giocare con i link

Scritto da Fare-internet il 13 ottobre 2010 condividi condividi

Logo jQuery

Post su jQuery


Ecco qulache “giochetto” da fare con i link.

1) Link che sparisce al passare del mouse (funziona solo su sfondo bianco):

Vieni qui

Codice:

<a href="#" class="sparisco">Vieni qui</a>

<script>
$(‘a.sparisco’).mouseover(function(){ $(this).css(‘color’,’#fff’)});
$(‘a.sparisco’).mouseout(function(){ $(this).css(‘color’,’#06c’)});
</script>


2) Anche questo sparisce:
Rivieni qui

Codice:

<a href="#" class="sparisco2">Rivieni qui</a>

<script>
$(‘a.sparisco2’).mouseover(function(){ $(this).css(‘opacity’,’0′)});
$(‘a.sparisco2’).mouseout(function(){ $(this).css(‘opacity’,’1′)});
</script>

3) Cambiare il testo del link quando ci si passa sopra:
Pagina 1

<a href="#" class="txtChange">Pagina 1</a>

<script>
$(‘a.txtChange’).mouseover(function(){ $(this).text(‘Pagina 2’)});
$(‘a.txtChange’).mouseout(function(){ $(this).text(‘Pagina 1’)})
</script>

4) Cambiare la url:
Pagina 1

Codice:

<a href="http://www.google.it/" target="ext" class="urlChange">Pagina 1</a>

<script>
$(‘a.urlChange’).mouseover(function(){$(this).attr(‘href’,’http://www.webtocom.com’)});
$(‘a.urlChange’).mouseout(function(){ $(this).attr(‘href’,’http://www.google.it/’)})
</script>

Tag: , ,  

Twitter