How to change an image using a select box

[SA Rob]

Hi Folks,I have this example of a select box where when I selct the text in the bow I want an image to appear. Although I have a real image at this site called 001.jpg the process does not seem to work

<select name="image" id="image" class="inputbox" size="1"><option value=""> - Select Image - </option><option value="[url="http://www.gnjgf.co.za/001.jpg"]http://www.gnjgf.co.za/001.jpg">1</option[/url]><option value="image2.jpg">image2.jpg</option><option value="image3.jpg">image3.jpg</option></select><div id="imagePreview">	displays image here </div>

Your help here would be most helpfulRegardsRob

[[dx]]

Try using <option value="value here"><img src="image location" /></option>

[Ingolme]

You will have to learn about PHP forms.

[SA Rob]

Hi - thanks for the reply.Unfortunatly - no success

[SA Rob]

You will have to learn about PHP forms.

Thanks for your reply - yes I agree I do need to learn about PHP hence me requesting help

[ShadowMage]

If you want the image to change without pressing a button, you'll need to use JavaScript.Add an image tag to your preview box. You'd then have to bind an event handler to the onchange event of the select and change the src attribute of the image.

[SA Rob]

If you want the image to change without pressing a button, you'll need to use JavaScript.Add an image tag to your preview box. You'd then have to bind an event handler to the onchange event of the select and change the src attribute of the image.

Hi Thanks for the reply.Is there something wrong with what is presented in code above ? and if so what may it be in order for the script to work.I use the selct box to make the choice and then I want a specific image to show in a place on my web page

[Ingolme]

You have to be ready to learn. I linked you to a page which would teach you how to use PHP forms (considering you took the time to learn the basics of PHP which are provided on the W3Schools tutorial)If you can learn Javascript http://w3schools.com/js/default.asp and HTML DOM http://w3schools.com/htmldom/default.asp then the task you want done should be pretty simple.

[justsomeguy]

There's no script at all in the code you posted. It sounds like you want to use Javascript to get the URL of the image that was selected and set that URL as the src of an img element somewhere on the page. That isn't going to be permanent, it's only going to show for the person who made the change as long as they have the page open, but it sounds like that's what you want to happen. The code you posted has BBcode in it to embed a URL, I assume that's not in your actual code. The option element would have to look something like this:

<option value="http://www.gnjgf.co.za/001.jpg">Image 1</option>

For the Javascript, you need to add an event handler to the select element to catch when you make a change, and the event handler needs to get the value of the selected option and update an image element with that value. Do you know how to do any of that so far?

[SA Rob]

There's no script at all in the code you posted. It sounds like you want to use Javascript to get the URL of the image that was selected and set that URL as the src of an img element somewhere on the page. That isn't going to be permanent, it's only going to show for the person who made the change as long as they have the page open, but it sounds like that's what you want to happen. The code you posted has BBcode in it to embed a URL, I assume that's not in your actual code. The option element would have to look something like this:

<option value="http://www.gnjgf.co.za/001.jpg">Image 1</option>

For the Javascript, you need to add an event handler to the select element to catch when you make a change, and the event handler needs to get the value of the selected option and update an image element with that value. Do you know how to do any of that so far?

Hi Justsomeguy,Thanks for your reply.I don tknow how to do this at all and have no php experiance that can be bragged about.I am trying what I have found in order fo rme to progress and as you can see flounderingYour help is appreciated

[SA Rob]

Hi Justsomeguy,Thanks for your reply.I don tknow how to do this at all and have no php experiance that can be bragged about.I am trying what I have found in order fo rme to progress and as you can see flounderingYour help is appreciated - oh you are correct in your understanding that if I pic a name an image will appear while that page is open for that specific selection

[SA Rob]

Hi Justsomeguy,Thanks for your reply.I don tknow how to do this at all and have no php experiance that can be bragged about.I am trying what I have found in order fo rme to progress and as you can see flounderingYour help is appreciated

DO you mean something like this

$(document).ready(function() {	 $("#image").change(function() {		 var src = $(this).val();		  $("#imagePreview").html(src ? "<img src='" + src + "'>" : "");	 }); });

[SA Rob]

You have to be ready to learn. I linked you to a page which would teach you how to use PHP forms (considering you took the time to learn the basics of PHP which are provided on the W3Schools tutorial)If you can learn Javascript http://w3schools.com/js/default.asp and HTML DOM http://w3schools.com/htmldom/default.asp then the task you want done should be pretty simple.

Hi,Thanks for the links. The second link brings me a lot closer to my requirement however it is for a button and not for a select boxSecondly it is for one image and my choice in the select box would be 1 of 30.So if I choose 1 then th eimage of person 1 would appear and similarly if I choose 2 the person 2's pic showsThanks for your help

[ShadowMage]

So if I choose 1 then th eimage of person 1 would appear and similarly if I choose 2 the person 2's pic shows

Right. That's what I tried to explain to you how to do.So let's go back and take this one step at a time. Like I said before, you need JavaScript. You can use the code you posted in the original post.So....

Add an image tag to your preview box.

That looks like this:

<div>   <img id="imagePreview" src='image1.jpg' alt='Image 1' /></div>

You can set the src to whatever you want the initial value to be. Notice I also moved the id to the image instead of the div.

You'd then have to bind an event handler to the onchange event of the select and change the src attribute of the image.

This step has two parts: create the function to change the img's src and bind that function to the onchange event of the select. Let's start with the function.Create a function that accepts one parameter, a string indicating the source of the new image. Use this string to change the image's src attribute.

function previewImage(source) {   var img = document.getElementById('imagePreview'); //Get a reference to the preview image   img.src = source; //Set the new source}

Now let's bind that function to your select.

<select name="image" id="image" class="inputbox" size="1" onchange='previewImage(this.value);'>   ...</select>

The function is bound to the onchange event of the select. That way whenever the user selects a new option, the function will fire. Also, notice the parameter I am passing. this refers to the select element. value is the value of whatever option is selected.

[SA Rob]

Right. That's what I tried to explain to you how to do.So let's go back and take this one step at a time. Like I said before, you need JavaScript. You can use the code you posted in the original post.So....That looks like this:

<div>   <img id="imagePreview" src='image1.jpg' alt='Image 1' /></div>

You can set the src to whatever you want the initial value to be. Notice I also moved the id to the image instead of the div.This step has two parts: create the function to change the img's src and bind that function to the onchange event of the select. Let's start with the function.Create a function that accepts one parameter, a string indicating the source of the new image. Use this string to change the image's src attribute.

function previewImage(source) {   var img = document.getElementById('imagePreview'); //Get a reference to the preview image   img.src = source; //Set the new source}

Now let's bind that function to your select.

<select name="image" id="image" class="inputbox" size="1" onchange='previewImage(this.value);'>   ...</select>

The function is bound to the onchange event of the select. That way whenever the user selects a new option, the function will fire. Also, notice the parameter I am passing. this refers to the select element. value is the value of whatever option is selected.

Thanks for your hard work.I have managed to get this far and it can be veiwed at this link

<script type="text/javascript">function showUser(str){if (str=="")  {  document.getElementById("txtHint").innerHTML="";  return;  }if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)	{	document.getElementById("txtHint").innerHTML=xmlhttp.responseText;	}  }xmlhttp.open("GET","MySQLreturntable2.php?q="+str,true);xmlhttp.send(null);}</script><form><select name="users" onchange="showUser(this.value)"><option value="">Select a tournament:</option><option value="1">KEMPTON PARK GC - 05/01/2011</option><option value="[url="http://gnjgf.co.za/001.jpg"]http://gnjgf.co.za/001.jpg[/url]" selected>1</option><option value="2">KYALAMI GC - 07/02/2011</option><option value="[url="http://gnjgf.co.za/002.jpg"]http://gnjgf.co.za/002.jpg[/url]" selected>2</option><option value="3">ST.FRANCIS LINKS - 06/03/2011</option><option value="4">GARDENER ROSS GC - 27/03/2011</option><option value="5">RUSTENBURG GC - 28/03/2011</option><option value="6">WITBANK GC - 31/03/2011</option><option value="7">EBOTSE GE - 03/04/2011</option><option value="8">UMHLALI GE - 06/04/2011</option><option value="9">DURBAN CC - 08/04/2011</option><option value="10">STEENBERG GC - 10/04/2011</option><option value="11">MACCAUVLEI GC - 26/04/2011</option><option value="12">MOUNT EDGECOMBE CC - 02/05/2011</option><option value="13">RANDPARK GC - 22/05/2011</option><option value="14">OUBAAI GC - 12/06/2011</option><option value="15">ZWARTKOP CC - 26/06/2011</option><option value="16">ERPM GC - 30/06/2011</option><option value="17">POLOKWANE GC - 02/07/2011</option><option value="18">ERINVALE - 03/07/2011</option><option value="19">ROYAL CAPE GC - 04/07/2011</option><option value="20">PAARL GC - 05/07/2011</option><option value="21">IRENE CC - 10/07/2011</option><option value="22">STELLENBOSCH GC - 14/07/2011</option><option value="23">MOWBRAY  GC - 15/07/2011</option><option value="24">BRYANSTON CC - 31/07/2011</option><option value="25">SCHOEMAN PARK GC - 07/08/2011</option><option value="26">NELSPRUIT GC - 14/08/2011</option><option value="27">THE HILL - 21/08/2011</option><option value="28">MOSSEL BAY GC - 28/08/2011</option><option value="29">WANDERERS GC - 18/09/2011</option><option value="30">Pecanwood Golf Club</option></select></form><br /><div id="txtHint"><b>The Results of the Winners will be listed here.</b></div>

What needs to happen now is as the selction of the tournament happens the respective image appear.I get the desired effect when I do the code below but in this code th tournaments are not in place

<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 value="[url="http://gnjgf.co.za/001.jpg"]http://gnjgf.co.za/001.jpg[/url]" selected>1</option>			<option value="[url="http://gnjgf.co.za/002.jpg"]http://gnjgf.co.za/002.jpg">2</option[/url]>			<option value="plane.gif">Plane</option>			<option value="hand.gif">Hand</option>			<option value="cake.gif">Pie</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 ([url="http://www.dynamicdrive.com"]www.dynamicdrive.com[/url])For full source code, installation instructions,100's more DHTML scripts, and Terms OfUse, visit dynamicdrive.com*/var tempobj=document.dynamicselector.dynamicselector2function generateimage(which){if (document.all){dynamic3.innerHTML='<center>Loading image...</center>'dynamic3.innerHTML='<img src="'+which+'">'}else if (document.layers){document.dynamic1.document.dynamic2.document.write('<img src="'+which+'">')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 (document.all||document.layers){if (tempobj.options.selectedIndex!=-1)window.onload=generatedefault}</script>

I hope this all make ssenseRegards

[ShadowMage]

:)Where did all that come from? There's a lot of really old and unnecessary code there. Did you not read my reply?

[Ingolme]

The problem is that he's not trying to do it himself, he just wants a script to copy and paste.DynamicDrive is on my blacklist of worst sites to learn any code from.

[SA Rob]

Where did all that come from? There's a lot of really old and unnecessary code there. Did you not read my reply?

Hi,I did read your reply and thought it best to show where I am going with this - my efforts take two steps forward - one step back but eventually get there.You ar emost probably correct in saying this is old and some code more than likely unecessary but for the link part it is working and now its to get the imgaes to work when I select the specific event.Sorry to put you in another direction by doing thisRegards

[SA Rob]

Hi,I did read your reply and thought it best to show where I am going with this - my efforts take two steps forward - one step back but eventually get there.You ar emost probably correct in saying this is old and some code more than likely unecessary but for the link part it is working and now its to get the imgaes to work when I select the specific event.Sorry to put you in another direction by doing thisRegards

Perhaps now that the sentiments of some are known there is some other willing persons in this forum to help

[SA Rob]

Ok Folks,It seems like I am progressingI have the page that when I select the tournament the results appear and the place I want the image to appear is just below "PICTURE"

<?php$q=$_GET["q"];$con = mysql_connect("localhost", "e****", "**");if (!$con)  {die ("Hey loser, check your server connection.");}mysql_select_db("*_Members",$con);$sql="SELECT * FROM _Form_Nr_6 WHERE Record_Nr = '".$q."'"; $result = mysql_query($sql);echo "<table border='5' cellpadding='3' cellspacing='2' bordercolor='#D6D6D8' font style='font-size:11px' color='#2611A2' face='Calibri'><tr><th bgcolor='#D3E2FE'>PICTURE</th></tr>";while($row = mysql_fetch_array($result))  {  echo "<tr>";  echo "<td>".($row['image'])."</td>";   echo "</tr>"; }echo "</table>";mysql_close($con);?>

I have created a field in MySQL called "image"I would like to know if the attributes have been set up correctly in the MySQLas the picture does not show.If there are other reasons that can be seen above - I would be glad of your inputs

[birbal]

what is the data type of the image column? if its stored as BLOB you cant show the image itself like that. You need to set a seprate page which will render the image ..and then you need to link up that page with img tag..thats how dynamicaly image will be shown up..if it is stored as url path you can show it with img tag by specifying the url there

[dsonesuk]

What have you got in image field?image filename?, image filename and location? for how you have set it up it would have to include these plus img html tag and source as wellit should coded so it places the image filename, plus maybe location within src of img tag on the page itselffilename only supplied from image field

while($row = mysql_fetch_array($result))  {  echo "<tr>";  echo "<td><img src='myimagelocation/".($row['image'])."' alt='' /></td>";   echo "</tr>"; }

filename and location supplied from image field

 while($row = mysql_fetch_array($result))  {  echo "<tr>";  echo "<td><img src='".($row['image'])."' alt='' /></td>";   echo "</tr>"; }

[SA Rob]

what is the data type of the image column? if its stored as BLOB you cant show the image itself like that. You need to set a seprate page which will render the image ..and then you need to link up that page with img tag..thats how dynamicaly image will be shown up..if it is stored as url path you can show it with img tag by specifying the url there

I have set the attributes to be longblob and can upload the file in MySQL.How do i set up the image tag then - I wan tthe image to appear in a frame much the same as what can be seen in the link

[SA Rob]

What have you got in image field?image filename?, image filename and location? for how you have set it up it would have to include these plus img html tag and source as wellit should coded so it places the image filename, plus maybe location within src of img tag on the page itselffilename only supplied from image field

while($row = mysql_fetch_array($result))  {  echo "<tr>";  echo "<td><img src='myimagelocation/".($row['image'])."' alt='' /></td>";   echo "</tr>";}

filename and location supplied from image field

 while($row = mysql_fetch_array($result))  {  echo "<tr>";  echo "<td><img src='".($row['image'])."' alt='' /></td>";   echo "</tr>";}

Hi,I have made a change

echo "<tr>";  echo "<td><img src='http://www.gnjgf.co.za/".($row['image'])."' alt='' />".($row['image'])."</td>";   echo "</tr>";

With an improvement - however the pic does not show - probaly because the name is not inserted.If I put the name of the file in following .co.za/001.jpg then that pic will always be the pic rather than the champions pic from each event showing on selection

[dsonesuk]

Use below

echo '$q reference: '.$q.'<br />';echo 'Number of records Found using $q reference: '.mysql_num_rows($result).'<br />';echo "<table border='5' cellpadding='3' cellspacing='2' bordercolor='#D6D6D8' font style='font-size:11px' color='#2611A2' face='Calibri'>";echo "<tr>";echo "<th bgcolor='#D3E2FE'>PICTURE</th>";echo "</tr>";while($row = mysql_fetch_array($result))  {if($row['image']=="")	{  echo "<tr>";  echo "<td>currently no image entered for this record id: ".$row['Record_Nr']." </td>";   echo "</tr>";	}else{  echo "<tr>";  echo "<td><img src='".$row['image']."' alt='' /></td>";   echo "</tr>";}}echo "</table>";

to check if the value for $q has been passed, to use in SQL query.check how many records found that matches $q reference.check if image file has been inserted for that record, and not blank.this should give you and idea what or what is not, passed, searched for and found.