Alternativa a Select

**pariri** · 24-04-2005, 17:54

ciao a tutti, vi chiedo una cortesia,
ho questo javascript e usa un "select". Vorrei sapere se ci sarebbe una alternatic al "select" (non penso che io sia OT visto che si parla di select):

codice:

<html><head><body><form name="dynamicselector">
<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 selected value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg">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]'+which+'[/img]

'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center>[img]'+which+'[/img]

'+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>
</body></head></html>

Grazie

**alexdem24** · 25-04-2005, 13:19

bhe, di alternative ce ne sono molte, dipende dall'utilizzo che ne vuoi fare.
Al posto del select potresti usare i radiobutton, oppure dei semplici bottoni, oppure ancora dei checkbox.

Come ho detto dipende cosa vuoi fare.

ciao

**pariri** · 25-04-2005, 14:04

Se tu prova il codice vedrai che a sinistra c'è la select e a destra le immagini
Vorrei non usare la select!
Boh, un testo che quando clicca vedo l'immagine.

Grazie.

**alexdem24** · 25-04-2005, 14:08

l'avevo visto lo script.

Cmq ti ho risposto anche dall'altra parte dove credo che il problema si piu' o meno simile.

Prova a darci un'occhiata.

ciao

http://forum.html.it/forum/showthrea...hreadid=822598

**pariri** · 25-04-2005, 14:15

Però con questo riesco ad avere la descrizione delle immagini ed è soprattuto quello che m'interessa!
Non si può cambiare questo esemopio?

Grazie!

**alexdem24** · 25-04-2005, 15:05

vedi se cosi' potrebbe andare bene. Ti ho aggiunto la descrizione che puoi personalizzare per ogni immagine.

codice:

<script language="javascript" type="text/javascript">
  function changeImg(newImg, desc) {
	var path="immagini/";  //Qui' devi inserire il percorso dove sono situate le immagini ingrandite
    var ref=document.getElementById('foto');
    var ref_source=document.getElementById('description');
    ref.src=path+newImg+".jpg";
    ref_source.innerHTML=desc;
  }
</script>

<html>
<head><title>Load Immagini</title></head>
<body>
<table cellpadding=1 cellspacing=0 align=center>
  <tr><td colspan="3">[img]default.jpg[/img]<div id="description" style="width:300px; height:20px; text-align:center"></div></td></tr>
  <tr>
    <td>[img]immagini/imgOr1.jpg[/img]</td>
    <td>[img]immagini/imgOr2.jpg[/img]</td>
    <td>[img]immagini/imgOr3.jpg[/img]</td>
  </tr>
  <tr>
    <td>[img]immagini/imgOr4.jpg[/img]</td>
    <td>[img]immagini/imgOr5.jpg[/img]</td>
    <td>[img]immagini/imgOr6.jpg[/img]</td>
  </tr>
</table>
</body>
</html>

Ovviamente la disposizione degli oggetti sono a tuo piacimento.

p.s.
Giusto nel caso che non avessi letto il funzionamento nel post precedente, per visualizzare qualcosa nello script, hai bisogno di creare una cartella, creare un file di testo dove copi ed incolli il codice sopra citato, creare dentro quella cartella una sotto cartella chiamata "immagini" dove devi inserire alcune immamgini ( lo script al momento ne prende 6).

ciao fammi sapere.

**pariri** · 25-04-2005, 15:50

qualcosa non va!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript" type="text/javascript">
  function changeImg(newImg, desc) {
	var path="grafica/foto/";  //Qui' devi inserire il percorso dove sono situate le immagini ingrandite
    var ref=document.getElementById('foto');
    var ref_source=document.getElementById('description');
    ref.src=path+newImg+".jpg";
    ref_source.innerHTML=desc;
  }
</script>

<html>
<head><title>Load Immagini</title></head>
<body>
[img]grafica/foto/m01.jpg[/img]
[img]grafica/foto/m02.jpg[/img]
<table cellpadding=1 cellspacing=0 align=center>
  <tr><td colspan="3">[img]grafica/foto/03.jpg[/img]<div id="description" style="width:300px; height:20px; text-align:center"></div></td></tr>

</table>
			</body>
</html>

:master:

**alexdem24** · 25-04-2005, 16:08

Bhe ci sono alcune cose che ti sei dimentiato di aggiungere. (Probabilmente delle sviste)
Per prima cosa, nella funzione "changeImg" il primo parametro deve essere il nome del file e solo quello, senza includere anche il path (che includi gia' nella funzione javascript).

Seconda cosa, ti sei assicurato di avere le immagini "01.jpg" e "02.jpg" nella cartella "grafica/foto/" ?

Cmq ti posto sotto il codice corretto.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript" type="text/javascript">
  function changeImg(newImg, desc) {
	var path="grafica/foto/";  //Qui' devi inserire il percorso dove sono situate le immagini ingrandite
    var ref=document.getElementById('foto');
    var ref_source=document.getElementById('description');
    ref.src=path+newImg+".jpg";
    ref_source.innerHTML=desc;
  }
</script>

<html>
<head><title>Load Immagini</title></head>
<body>
[img]grafica/foto/m01.jpg[/img]
[img]grafica/foto/m02.jpg[/img]
<table cellpadding=1 cellspacing=0 align=center>
  <tr><td colspan="3">[img]grafica/foto/m03.jpg[/img]<div id="description" style="width:300px; height:20px; text-align:center"></div></td></tr>

</table>
			</body>
</html>

Ciao.

**pariri** · 25-04-2005, 16:17

OK!!!

L'ultima domanda:
e se invece di mettere una img miniatura metto un testo?

grazie

**alexdem24** · 25-04-2005, 16:21

E' quasi la stessa cosa con la differenza che sostituisci l'immagine con il testo.

Prima:

codice:

[img]grafica/foto/m01.jpg[/img]

Dopo:

codice:

 Immagine 1

ciao

Discussione: Alternativa a Select

Strumenti discussione

Ricerca discussione

Visualizza

Alternativa a Select

Permessi di invio