Michele Basso
a- a+

Selettore dinamico di immagini

Con questo script DHTML viene creato un visualizzatoredinamico di immagini. E' presente un menù con lalista delle immagini, e un'area dove vengono visualizzatele immagini selezionate dalla lista nel menù.

Per inserire lo script, copiamo questo codice all'internodel tag body, nel punto in cui vogliamo che compaiano leimmagini:

<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.allvar ns6=document.getElementByIdvar tempobj=document.dynamicselector.dynamicselector2if (ie4||ns6)var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3function 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()}elsealert('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()elsewindow.onload=generatedefault}}</script>

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

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

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

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

Qui dobbiamo inserire la descrizione(DHTML: TheDefinitive Guide) che comparirà sottol'immagine.

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



Ti potrebbe interessare anche

commenta la notizia