Due funzioni jQuery e qualche riga CSS…
Se non abbiamo esigenze particolarmente elaborate, la strada migliore da percorrere per realizzare uno script che si occupi di mostrarci le descrizioni delle immagini presenti nell’alt tag, è quella di scriversi il tutto da sè senza ricorrere a plugin esterni. Come fare? Vediamo passo passo quali sono le attenzioni da prestare, basteranno 8/10 di codice jQuery e qualche “precauzione” CSS!
Uno script orientato al SEO
Dal momento che l’attributo alt delle immagini possiede ancora una certa importanza nel SEO, perchè non sfruttarlo per ottimizzare le nostre pagine? Quello che andiamo a fare con il nostro script jQuery sarà semplicemente di prelevare il contenuto di questo attributo e mostrarlo in un div sovrapposto alla nostra immagine!
In questo modo soddisferemo sia le esigenze dell’utente che visualizzerà la descrizione, sia quelle del motore di ricerca che, non potendo vedere il javascript, avrà comunque la sua descrizione a disposizione.
CSS
Devo ammettere che prima di realizzare la versione cross-browser avevo utilizzato la proprietà inline-block per impilare le immagini in modo che si riadattassero nel caso lo schermo venisse ristretto… Tuttavia la tristezza per il risultato mostrato su IE ha fatto prevalere il sentimento di “compatibilità” ed quindi optare per la soluzione standard del float…
Per quanto riguarda la parte essenziale del nostro progetto invece (ovvero il mostrare una descrizione al mouseover), ho giocato sul concetto di maschera.
Teniamo da parte il contenitore per le polaroid di sfondo, il div box-mask è un semplice div relativo che funge da maschera ad un div assoluto description posizionato ad un livello di z-index superiore, ma “nascosto” settando bottom negativo pari alla sua stessa altezza. E’ stato poi utilizzato il sistema di colori RGBA per realizzare l’effetto di trasparenza solo sul colore di sfondo e non sul testo. Purtroppo sui browser più datati la trasparenza non è visibile. Per ovviare si potrebbe utilizzare la proprietà opacity perdendo però la possibilità appena descritta, ed ottenendo quindi un testo trasparente. Ai posteri l’ardua sentenza :).
Riassumendo quindi, il codice css utilizzato nell’esempio, necessario al nostro scopo, con le proprietà appena descritte sarà:
.box {
width:201px;
height:215px;
margin:5px 0;
background:url(background-polaroid.png) no-repeat;
z-index:0;
padding:15px 14px 0 15px;
float:left;
}
.box-mask {
position:relative;
z-index:1;
overflow:hidden;
width:200px;
height:200px;
}
.description {
position:absolute;
left:0;
z-index:2;
bottom:-60px;
background: #000;
background: rgba(0,0,0,0.6);
color:#fff;
width:180px;
height:40px;
padding:10px;
}Il codice jQuery
Buona parte del lavoro l’abbiamo fatto via CSS, ora tramite jQuery diamo vita al tutto realizzando un’animazione (usando la funzione animate()) al passaggio del mouse sopra le nostre foto (funzione hover()), prelevando l’attributo alt e mostrandolo in un div ad-hoc!
$(".box-mask").hover(
function (){
altTag = $(this).find("img").attr("alt");
$(this).find(".description").append(""+altTag+"");
$(this).find(".description").animate({bottom: '0'}, 100);
},
function (){
$(this).find(".description").animate({bottom: '-60'}, 100);
$(this).find(".description span").remove();
}
);Supporto browser
Dulcis in fundo, il supporto ai browser. La funzionalità è garantita su tutti i browser, recenti e non. L’unico fattore, come analizzato in precedenza, di distinzione tra moderni e “obsoleti” sarà la trasparenza del div contenente la descrizione :)
