Immagini in seòect box popolata da query

Monital

Utente Attivo
15 Apr 2009
778
2
18
Buonasera,

Ho fatto delle ricerche ed a quanto pare in html quello che vorrei fare è impossibile.

Mi rivolgo a voi nel caso qualcuno abbia qualche idea su come superare l'ostacolo.

Il quesito è molto smplice. Ho una select che si popola in maniera dinamica da una query ora vicino ai singoli nomi vorrei far apparire un immagine ma con il semplice html non funge

il codice è questo

PHP:
$sql="SELECT * FROM table";
$result = mysql_query($sql);
while($riga=mysql_fetch_array($result)){
$id=$riga['ID'];
$nome=$riga['Nome'];
echo  "<option value=\"$nome\">$nome</option>"; 
}

a cui ho aggiunto

PHP:
$sql="SELECT * FROM table";
$result = mysql_query($sql);
while($riga=mysql_fetch_array($result)){
$id=$riga['ID'];
$nome=$riga['Nome'];
echo  "<option value=\"$nome\"><img src=\"http://miosito.com/img/".$id.".jpg\" whidth=\"10\" height=\"10\">$nome</option>"; 
}

ma non funge.

Suggerimenti?

magari qualche funzione in javascript?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
come stai tentando tu credo che non sia possibile.
prova questo usando i css e le immagini come background
PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.opt{/*classe generale per le option*/
	background-repeat: repeat-x;/*si ripete per la larghezza della option*/
	background-size:100% 100%;/* qui puoi provare a dimensionare in px o dare es 10% 10%*/
	/*poi nelle option con style scegli l'immagine*/
}
-->
</style>
</head>
<body>
<?php
$sql="SELECT * FROM table";
$result = mysql_query($sql);
?>
<form action="#" method="post">
<select name="pinco" class="zero">
  <option value="">seleziona</option><!-- sulla prima option non viene l'immagine-->
<?php
while($riga=mysql_fetch_array($result)){
	$id=$riga['ID'];
	$nome=$riga['Nome']; 
	echo "<option value=\"$nome\" class=\"opt\" style=\"background-image: url(http://miosito.com/img/$id.jpg)\">uno</option>";
}
?>
</select>
</form>
</body>
</html>
è evidente che devi prepararti al meglio le immagini
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
ok testato modificando la larghezza però in realtà come siv ede anche da backbround le immagini me le mette di sottofondo mentre io le volevo affiancate al singolo elemento della option.

ho dimenticato un particolare che mi era sfuggito e l'ho notato solo vedendo le immagini ripetute.

Le select box si creano in funzione di un for per tanti $x tante select quindi le immaigni oltre che vederle in sottofondo le vedo ripetute tante volte quanto $x

in realtà il codice completo è

PHP:
for($i=0;$i<$rc;$i++){
<form action="#" method="post">
<select name="pinco" class="zero">
  <option value="">seleziona</option><!-- sulla prima option non viene l'immagine-->
<?php
while($riga=mysql_fetch_array($result)){
    $id=$riga['ID'];
    $nome=$riga['Nome']; 
    echo "<option value=\"$nome\" class=\"opt\" style=\"background-image: url(http://miosito.com/img/$id.jpg)\">uno</option>";
} 
</select>
}
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
tra il tag <select> e il </select> ci può stare solo il tag <option></option>
cioe non puoi fare es.
<img src="...."><option></option>
e nemmeno
<option><img src="...."></option>


comunque non ho capito una cosa, quel for($i=0;$i<$rc;$i++){: nella pagina fai più form? come fa poi a capire php quale option hai selezionato?
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
il form lo apro prima del ciclo e poi la select ha come nome un array perchè a me serve che mi arrivino tutti i dati selezionati
PHP:
echo "<form>";
for($i=0;$i<$rc;$i++){
echo "<INPUT TYPE=\"text\" class=\"inputtext\" readonly=\"readonly\" id=\"input$i\" name=\"nomi[]\"   
VALUE=\"\" ONKEYUP=\"autoComplete(this,this.form.options,'value',true)\">";
echo "<SELECT NAME=\"options\"  class=\"select\" onChange=\"this.form.input$i.value=this.options[this.selectedIndex].value\">
<option value=\"\">-----------</option>
$sql="SELECT * FROM $table";
$result = mysql_query($sql);
while($riga=mysql_fetch_array($result)){//o mysql_fetch_assoc
$id=$riga['ID'];
$nome=$riga['Nome'];
echo  "<option value=\"$id\">$nome</option>";  
} 
echo "</select><br>";

mi sarebbe piaciuto che si vedeva un immagine per ogni singolo nome che usciva in lista.

Immagine che è collegata all'id del nome

ho notato che nemmeno nelle select multiple questo non è possibile mannaggia
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
questo è il meglio vhe sono riuscito a ottenere
PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.opt{/*classe generale per le option*/
	background-position: left center;
	background-color:#999999;
	background-repeat: no-repeat;
	background-size:30px 30px;
	height:34px;
	text-indent: 34px;/*qualche px in più del bck size*/
}
-->
</style>
</head>
<body>
<?php
if(isset($_POST['invia'])){
echo "<pre>";
var_dump($_POST['pinco']);
echo "</pre>";
}
//l'aaray puo essere sostituito dal db o da questo costruito
$im=array('criric'=>'hj.png','longo'=>'rubik.png', 'borgo'=>'miele.jpg');
?>
<form action="#" method="post">
<select name="pinco" class="zero">
  <option value="">seleziona</option><!-- sulla prima option non viene l'immagine-->
<?php
foreach($im as $nome => $file){
	//cartella da adattare
	$file="../../_emailBI/numeri/".$file;
	echo "<option value=\"$nome\" class=\"opt\" style=\"background-image: url($file)\">$nome</option>";
}
?>
</select>
<br>
<input name="invia" type="submit" id="invia" value="invia">
</form>
</body>
</html>
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
mmh ho inziiato a mette giu qualcosa ma era troppo complciato così perchè l'option nel foreach non mi riconosceva più il nome.

Comunque sia come si dice:

L'importante non è come ci si arriva ma è arrivare" :quote::quote:

Scherzi a parte mi hai dato l'intuizione giusta. Rivedendo il tuo ultimo codice ho notato questo

PHP:
   background-repeat: no-repeat;

è bastato mettere quello e qualche spazio a nome ed è andata. Stupido a non pensarci prima no?

Grazie ancora ragassi.
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
non dovrebbero servirti gli spazi oltre a no-repeat questo l'avevi notato

text-indent: 34px;/*qualche px in più del bck size*/

?
ti sposta il testo oltre l'immagine
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
ciao
non dovrebbero servirti gli spazi oltre a no-repeat questo l'avevi notato

text-indent: 34px;/*qualche px in più del bck size*/

?
ti sposta il testo oltre l'immagine

GRANDE :beer::beer::beer::beer:

non l'avevo notato.

Sei ufficialmente il mio nuovo IDOLO :rolleyes:
 
Discussioni simili
Autore Titolo Forum Risposte Data
R Immagini html HTML e CSS 1
E Come gestire al meglio le immagini legno grande formato Photoshop 0
M Random Immagini + Testi PHP 13
L form immagini per il database PHP 0
Ricky80 Coordinazione immagini HTML e CSS 4
P Percorsi e immagini. PHP 0
N Indicizzazione immagini su Google Google Search Console 0
L Import Immagini piattaforma IONIC Sviluppo app per Android 0
L Import massivo di immagini in tabelle piattaforma IONIC Presentati al Forum 1
P Script upload immagini jQuery 0
E Salvare immagini PHP 0
S problema salvataggio immagini Photoshop 0
R Immagini scontornate: che formato? HTML e CSS 4
A Sovrapposizione Immagini Photoshop 0
Cosina Mostrare immagini da una cartella, ma solo un numero definito PHP 12
Tommy03 Gestire dimensioni immagini PHP 4
M Aiuto con inserimento immagini WordPress 6
L Scmporre una foto dotata di varie immagini in piu layer Photoshop 2
M Impossibile visionare la immagini dall'App. IP Cam e Videosorveglianza 8
A Array di immagini Sviluppo app per Android 10
L Come spostare cartella immagini/video PHP 1
A Cornici immagini per sito Web Wordpress WordPress 1
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
R uploader di immagini e text PHP 0
S Importazione immagini PHP 3
beatle [Photoshop] problema inserimento immagini Photoshop 1
L [PHP] Invio Immagini PHP 1
I [PHP] generazione url "uguale" che punta a due immagini diverse PHP 0
W Immagini professionali a costi sostenibili Discussioni Varie 3
bluebirdoncanvas [Photoshop] problema dimensioni immagini o zoom Photoshop 0
andreas88 Immagini non leggibili dopo trasferimento alla scheda SD Smartphone e tablet 0
zorro Aggiunta di immagini al sito Leggi, Normative e Fisco 0
M [PHP] Selezionare immagini directory non presenti in db PHP 11
romeocharly [PHP] Script per rinominare in automatico le immagini inviate da ftp PHP 0
I [PHP] Immagini caricate su server diverse da quelle mostrate PHP 19
kiai969 Stesse immagini su WordPress SEO e Posizionamento 2
L [HTML] Problemino con le immagini di sfondo HTML e CSS 4
A [Photoshop] Ritagliare cerchi tutti uguali da diverse immagini Photoshop 2
F [PHP] Galleria immagini PHP 6
trattorino [PHP] problema entrata immagini insert PHP 1
L Trovare immagini belle per siti Discussioni Varie 1
L [Photoshop]Migliorare qualità immagini Photoshop 8
A [WordPress] Importare immagini in post WordPress 2
R [HTML] Immagini con link, uguali su tutte le pagine del sito HTML e CSS 3
S [WordPress] Recuperare l'url immagini in evidenza WordPress 0
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
L [WordPress] Uso delle immagini di un tema WordPress 5
A [WordPress] Ridimensionare immagini preview della fotogallery WordPress 8
felino [PHP] Uploadify: upload immagini PHP 0
Andrea_Ventura [HTML] Realizzazione di un layout dinamico di immagini HTML e CSS 4

Discussioni simili