jQuery e CSS

Qualche giorno fa Youtube in occasione dell’evento l’ora della terra. Ha inserito nelle sue pagine, un interruttore per permettere di spegnere il “bianco” delle sue pagine, oscurando buona parte della pagina.
Una simpatica iniziativa per ricordarci di questo evento globale e spegnere le nostre luci per 1 ora. Iniziativa cui prendono parte ogni anno moltissime città d’America ed Europa, che puntualmente staccano l’illuminazione di importanti e simbolici edifici (torre eiffel, colosseo etc.) per 1 ora.

Colpito dall’interruttore posto sulle pagine di youtube, ho pensato di mostrarvi come ottenere lo stesso effetto “apertura/chiusura” dell’interruttore. Utilizzando qualcosa che si discosta dal semplice e convenzionale cambio di immagine cui siamo stati abituati con javascript. Piuttosto, voglio mostrarvi qualcosa di alternativo usando jQuery e i CSS, alla stessa maniera dei web designer di Youtube, attraverso l’utilizzo di una sprite map (nel nostro caso 1 singola immagine che contiene l’icona di un interruttore chiuso, affiancata a quella dello stesso interruttore, spento) e la tecnica dell’image slicing (in cui si adopera jQuery per modificare all’evento .click alcuni parametri CSS, che permettono di visualizzare un’altra porzione di immagine).

Passiamo subito all’esempio, salvate questo codice sul vostro desktop come pagina di esempio, banalmente chiamiamola, prova.html:

<html>
<head>
<title>Sprite technique example with jquery e css</title>
<style>
#logo-link
{
  width:19px;
  height:49px;
  text-decoration:none;
  display:block;
  background-image:url(switch_sprite_slidetoggle.png); /*la foto unica che verrà splittata (in realtà viene spostata nel riquadro di visuale fisso) */
  background-position:0px 0;
}
/*#logo-link:hover,#logo-link:active  { background-position:0 0; }*/
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready( 
/*
MADE BY ROCCO MUSOLINO - WWW.HACKERSTRIBE.COM
# Esempio di Sprite mapping (Image slicing), con jquery e i css.
 
*/
  function() {
  var k = 0;
    $("#logo-link").click(
	function(){ 
    if (!k) {
    //si apre
	$("#logo-link").animate({
    backgroundPosition: "21px 0",
	opacity: 0.7
  }, 200, function() { $("#logo-link").animate({opacity: 1}, 200); } 
  ); 
 
	k = 1;
	} else {
	//si chiude
	$("#logo-link").animate({
    backgroundPosition: "0 0",
	opacity: 0.7
  }, 200, function() { $("#logo-link").animate({opacity: 1}, 200); } 
  ); 
 
	k = 0;
	}
 
});  
});
 
</script>
 
</head>
<body>
 
<div id="logo-link"></div>
 
</body>
</html>

Questa è l’immagine usata nell’esempio, salvatela e inseritela nella stessa directory di prova.html:

🙂 Avrete così ottenuto un simpatico pulsante On – Off realizzato con un’unica sprite map “tagliata” dinamicamente con jquery, facendo uso delle proprietà dei fogli di stile a cascata (CSS).