Michele Basso
a- a+

Selettore dinamico di immagini

Con questo script DHTML viene creato un visualizzatore dinamico di immagini. E' presente un menù con la lista delle immagini, e un'area dove vengono visualizzate le immagini selezionate dalla lista nel menù.

Per inserire lo script, copiamo questo codice all'interno del tag body, nel punto in cui vogliamo che compaiano le immagini:

<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4" onChange="generateimage(this.options[this.selectedIndex].value)">

            <option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>
            <option value="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg">DHTML QuickStart</option>
            <option value="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg">HTML4</option>
            <option value="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg">IE5 DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

<script>

//Dynamic Image selector Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"

var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+ '"><br><br>'+description[tempobj.options.selectedIndex]+ '</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+ '"><br><br>'+description[tempobj.options.selectedIndex]+ '</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}

if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}

</script>

Per ogni immagine ci sono 2 parti da modificare, come nell'esempio seguente:

<option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>

In questa riga abbiamo il link dell'immagine(http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg) e il nome che comparirà nel menù(DHTML Guide).

description[0]="DHTML: The Definitive Guide"

Qui dobbiamo inserire la descrizione(DHTML: The Definitive Guide) che comparirà sotto l'immagine.

Per problemi relativi all'utilizzo dello script, consultate il nostro forum di discussione.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!