Ciao.
Ho l'esigenza di far selezionare all'utente un'immagine tra una lista di immagini.
Non trovando molti argomenti a proposito mi sono un po'arrangiato usando diversi script trovati qua e là.
Innanzitutto vi faccio vedere la mia pagina d'esempio , in modo che possiate capire di cosa sto parlando. Premetto che non funziona con IE, mentre con FF e Chrome sì.
Ecco il codice:
formselezionaimmagine.html
codice:
<form id="inserimento_prodotto" name="nouvelle" method="post" action="azioni/nuovo_prodotto.php">
<table width="600" border="0">
<tr>
<td>Immagine</td>
<td>
<input name="newcom" type="text" id="newcom" disabled="disabled" /><input type="button" value="scegli immagine" onClick="window.open('scegliimmagine.php','popup','width=700,height=600,scrollbars');"></td>
</tr>
<tr>
<td></td>
<td><input name="submit" type="submit" value="invia" /></td>
</tr>
</table>
</form>
Molto semplicemente: ho un campo text disabilitato, di nome newcom e un pulsante di scelta immagine che apre una popup per la scelta dell'immagine.
scegliimmagine.php (è la popup che si apre)
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Scegli Immagine</title>
<style type="text/css">
img {
padding: 5px;
height: 80px;
}
div#fisso{
height:60px;
border-bottom:3px solid #000;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#bbb;
z-index:999999;
}
div#immagini{
position:relative;
top:60px;
}
div#singolaimmagine{
float:left;
border: 1px solid #000;
height:130px;
margin:3px;
padding:2px
}
.nolines {
text-decoration:none}
</style>
<script language="javascript">
function valeur(test){
window.opener.document.forms['nouvelle'].newcom.value= document.form1.nomeimmagine.value;}
</script>
<script type="text/javascript">
function addText(instext) {
var mess = document.form1.nomeimmagine;
//IE support
if (document.selection) {
mess.focus();
sel = document.selection.createRange();
sel.text = instext;
document.form1.focus();
}
//MOZILLA/NETSCAPE support
else if (mess.selectionStart || mess.selectionStart == "0") {
var startPos = mess.selectionStart;
var endPos = mess.selectionEnd;
var chaine = mess.value;
mess.value = chaine.substring(0, startPos) + instext + chaine.substring(endPos, chaine.length);
mess.selectionStart = startPos + instext.length;
mess.selectionEnd = endPos + instext.length;
mess.focus();
} else {
mess.value += instext;
mess.focus();
}
}
</script>
<script type="text/javascript" language="JavaScript">
<!--
function Reset_fields(nome_form){
nome_form = "document."+nome_form;
//alert("nome_form.length:"+eval(nome_form+".length"));
for (i=0;i< eval(nome_form+".length");i++){
var fild_name=eval(nome_form).elements[i].name;
var field_type=eval(nome_form).elements[i].type;
//alert("Campo:"+nome_form);
//alert("nome_form:"+fild_name+"\nTipo-->"+field_type);
/* --- TEXT FIELD --- */
var campo=eval(nome_form).elements[i].name;
eval(nome_form+"."+campo+".value=\"\"");
}
}
//-->
</script>
</head>
<body>
<div id="fisso">
<span style="float:left; padding:10px">
<form name="form1">
<input name="nomeimmagine" type="text" disabled="disabled" />
</form>
<form name="form">
<input type="button" onClick="valeur();window.close();" value="FATTO">
</form>
</span>
<span style="float:right; padding:10px">[url="upload.php"]Carica una nuova immagine[/url]</span>
</div>
<div id="immagini">
<?php
// qua apro una cartella ed elenco le immagini presenti all'interno.
$path = "img/";
$dir_handle = @opendir($path) or die("Unable to open folder");
while (false !== ($file = readdir($dir_handle))) {
if($file == "index.php")
continue;
if($file == ".")
continue;
if($file == "..")
continue;
echo "<div id=\"singolaimmagine\"><a href=\"#\" class=\"nolines\" onclick=\"Reset_fields('form1');addText('{$path}{$file}');return(false);\"><img src=\"{$path}{$file}\" border=\"0\" />
<p style=\"text-align:center\">{$file}</p></a></div>";
}
closedir($dir_handle);
?>
<div style="clear:both"></div>
</div>
</p>
</body>
</html>
In questo file c'è un div fisso in alto, dove troviamo un campo text che viene riempito dal nome dell'immagine cliccata dall'utente e sotto la lista di tutte le immagini presenti nella cartella img.
Il problema è che funziona perfettamente con Firefox e chrome, ma non con IE. Più precisamente è la funzione javascript addText() a non funzionare, sebbene al suo interno sia previsto l'uso in IE.
Qualche soluzione? Sbaglio qualcosa?
Rispondi quotando