Comparsa e Scomparsa DIV
Premetto che mi affaccio da circa un anno sul complesso panorama del web design; sto masticando css e html già da qualche mese, ma quando si tratta di Javascript non riesco a produrre più che un banale copia-incolla;
la mia problematica è questa:
sto progettando un sito in html di 7 pagine, ognuna delle quali presenta una gallery e un testo descrittivo per ogni immagine.
La gallery funziona correttamente, vi posto il codice HTML e il java-script:
HTML
<ul id="gallery">
<li><img src="../immagini/idraulica/1.jpg" alt="1"></li>
<li><img src="../immagini/idraulica/2.jpg" alt="2"></li>
<li><img src="../immagini/idraulica/3.jpg" alt="3"></li>
<li><img src="../immagini/idraulica/4.jpg" alt="4"></li>
<li><img src="../immagini/idraulica/5.jpg" alt="5"></li>
<li><img src="../immagini/idraulica/6.jpg" alt="6"></li>
<li class="ultima"><img src="../immagini/idraulica/7.jpg" alt="7"></li>
</ul>
Javascript
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagNa me('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li
.style.backgroundImage = 'url(' + li.getElementsByTagName('img')[0].src + ')';
li.title = li.getElementsByTagName('img')[0].alt;
gal.addEvent(li,'click',function() {
var im = document.getElementById('jgal').getElementsByTagNa me('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
In questo modo ottengo delle thumbnails, che una volta cliccate, mi restituiscono l'immagine relativa. Fin qua tutto ok.
Il problema sorge quando devo associare una descrizione diversa a ciascuna immagine, non riproducibile tramite i tag title o alt, ma testo più lungo e complesso, racchiuso in un DIV.
La mia domanda (che spero che qualche anima pia traduca in JS...) è la seguente:
si può fare in modo che al momento del click sulla thumbnails, compaia oltre che l'immagine anche il DIV relativo con il testo?
Ricordo che in ogni pagina, ho circa 6 o 7 immagini diverse, ognuna con proprio DIV testuale.
PS: sarebbe funzionale e estetico aggiungere dei veloci effetti di dissolvenza fra la comparsa di un'immagine e DIV relativo e comparsa di un'altra immagine e altro DIV, ovviamente è un di più, prima vorrei riuscire a farlo funzionare anche in maniera statica.
Spero di essere stato abbastanza chiaro!
Attendo una risposta, e ringrazio della disponibilità fin da subito.