menù a tendina popolato da immagini

[a.forte]

Salve a tutti,

se volessi popolare un menù a tendina con delle immagini devo ricorrere per forza ad uno script? Se c'è una soluzione in php preferirei evitare js:

echo "
<select name=\"colori\">
<option selected><img src=\"img.jpg\"></img>
<option value=\"s\">a
<option value=\"s\">b
<option value=\"s\">c
<option value=\"s\">d
<option value=\"s\">e
</select>
"; 

chiarmente è solo un esempio e non funziona, ma il problema è chiaro. In primis mi basterebbe mettere una immagine solo nella prima opzione. Se poi si riescono a mettere le immagini anche nei diversi option ancor meglio, ma non è necessario.

Grazie, Angelo.

[Grino]

Originariamente inviato da a.forte
Salve a tutti,

se volessi popolare un menù a tendina con delle immagini devo ricorrere per forza ad uno script? Se c'è una soluzione in php preferirei evitare js:

echo "
<select name=\"colori\">
<option selected><img src=\"img.jpg\"></img>
<option value=\"s\">a
<option value=\"s\">b
<option value=\"s\">c
<option value=\"s\">d
<option value=\"s\">e
</select>
"; 

chiarmente è solo un esempio e non funziona, ma il problema è chiaro. In primis mi basterebbe mettere una immagine solo nella prima opzione. Se poi si riescono a mettere le immagini anche nei diversi option ancor meglio, ma non è necessario.

Grazie, Angelo.

Credo che la cosa come la presenti sia irrealizzabile. Questo perchè il tag <option>TESTO</option> può contenere solo del testo e non altri tipi di elementi.

[a.forte]

Prima di tutto grazie della risposta,
io per le opzioni uso uno spazio e metto un colore in background. Ma se metto un testo come prima scelta mi allarga il menù della grandezza del testo. Tu hai una idea sull'alternativa se volessi mettere delle immagini?

[telegio]

puoi utilizzare come attributo di uno stile CSS una immagine di sfondo, tipo:

.antani {
	background-image: url(immagine.JPG);
}
.antani2 {
	background-image: url(immagine2.JPG);
}


<select name="select" id="select">
  <option class="antani">aaa</option>
  <option class="antani2">fff</option>
  </select>

però è ovvio che devi stare attento a come ti muovi..

[a.forte]

Mi sa che non funziona, ho fatto così per fare una prova:

<style type="text/css">
.antani {
background-image: url(img.jpg);
}
</style>


<select name="select" id="select">
  <option class="antani"> </option>

  </select> 

ed anche:

<select name="select" id="select">
  <option style="background-image: url(img.jpg);"> </option>
  </select> 

ed è strano perchè se faccio:

<select name="select" id="select">
  <option style="background-color:#FF00FF;"> </option>
  </select> 

invece funziona.

[telegio]

hai ragione.. hai sicuramente dei comportamenti strani: non puoi mettere SOLO l'immagine nella option, perchè quello che da la larghezza al campo è il testo, non una immagine di sfondo.. guarda la pagina che ho creato io che cosa strana che fa..
http://www.telegio.eu/untitled1.html
ho notato che non funziona con chrome, mentre con mozilla si vedono le immagini ma non lo sfondo, e con explorer invece si vede lo sfondo ma non le immagini
insomma.. se posso consigliarti di lasciar perdere.. lo faccio..

[Grino]

L'unica è realizzarla tramite un menu a tendina fatto con html e CSS (si trovano tanti esempi pronti in internet) e per far sembrare che tenga la selezione, nella parte sempre visibile, un po' di javascript sul client per alterarene il contenuto rispecchiando quanto selezionato e andando a modificare anche un campo nascosto, che dovrà trasferirti il valore finale in fase di submit.

Che ne pensi?

[a.forte]

Penso che è così. La mie speranza era di evitare di usare js perchè la select è già controllata da uno script e, dato che di js ne so ancora poco volevo trovare una soluzione semplice per non complicare le cose. Però ci provo, non nell'immediato ed appena comincio a sviluppare poi posto i risultati/avanzamenti/problemi

In ogni modo graize ad entrambi voi per la collaborazione,
a presto.