[Resolved] Urgent! Load image if drop down list changes

[system]

OK, I saw this in a couple of sites, so I know it's possible

I just hope someone inhere can give me the answer, I need it urgent.

I have a drop down list
with id + name of the images of a table

I want to show the image beside, below, above, I don't care, somewhere

and everytime the selected image changes(in the list)
I want to change the image...

PLeaze help me... I need this ver urgent

If you have any question, don't hesitate, I will keep my eye on this thread

thx a lot in advance....

[jubripley]

i'm relatively new to phpbuilder, but I'm kinda noticing that "give me a full-on solution" posts generally don't get answered.

I would recommend looking at Danny Goodman's Javascript Bible in the section about Image objects.

I would be happy to write such a thing for you on a contract basis 🙂

[The_Chancer]

This is more of an onChange javascript event - not really a PHP subject.

If you wanted to dynamically create the dropdown, then OK - that is possible with PHP...

However, you will need a javascript for what you want to do.

Something like

<Script language="javascript">
var image1 = new Image();
var image2 = new Image();
var image3 = new Image();

image1.src = "image1.jpg";
image2.src = "image2.jpg";
image3.src = "image3.jpg";

function doChange() {
picimage=document.formname.selectname.value;
document['picture'].src=picimage;
}
</script>

<select name=changeimage onChange=doChange()>
<option value=image1.jpg>Image 1</option>
<option value=image2.jpg>Image 2</option>
</select>

<img src="shared/mask.gif" width=171 height=260 border=0 alt="" name="picture" align="absmiddle">

Or something along those lines.

I have ripped the code from a site of mine, so it may need tweaking, you might also want to preload the images as well, makes it a lot faster...

[system]

Originally posted by jubripley
i'm relatively new to phpbuilder, but I'm kinda noticing that "give me a full-on solution" posts generally don't get answered.

I would recommend looking at Danny Goodman's Javascript Bible in the section about Image objects.

I would be happy to write such a thing for you on a contract basis 🙂

hehe, right... I'm also new...I just want some tips to get started on this one, I don't want a full solution...

That's why I look mostly at about 2-3 hours before posting something... but it seems like all those php freaks, don't have the solution to evety question I ask, so...:p

[system]

The chancer...

Thx for the reply

this part I also found somewhere, I know it's with javascript

problem is :

I get the info with php out of the table
And make it appear in a list
no prob so far...

				$sql = "SELECT * FROM tblImage ORDER BY ImageID ASC";
  				$result = mysql_query ($sql, $conn);
  				if (mysql_num_rows($result)>0) {
    				while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
      				$i++;

	   			$str1 .= "<"."option value=\"" . $row["ImageID"] . "\">". $row["ImageID"]. " : ".$row["ImageDescription"] . "</option>";
			

And I can also display an image, np

	
			$str .="<br><a href=\"javascript:my_win('".$row["FileName"]."')\" >";
			$str .= "<img src=\"../../pictures/";
			$str .= $row["FileName"]. "\" height=50 width=50 border=0> </a></td>";

(the javascript that I'm calling is just to open it in a screen when you click on it, works also 😉 )
but the question is, how to I get the right imageID and that it would be displayed...
I understand the little parts, but I can't seem to get it into a whole part... if you know what I mean 😉

So, I will keep on trying, I want this to work...

[system]

$str1 .= "<select name=\"select_image\" onChange=\"javascript:my_win('".$row["FileName"]."')\">";

this is the beginning

So...

(just to proove I was on the javascript path 🙂 )

[The_Chancer]

Try hardcoding first, and ignore the PHP bits.

You have the images, and their location...
You know that you want the image to change dependant on the dropdown select box.

So...

In the select option tag, you need to have a description and the value as follows:

<option value="images/image1.jpg">Image1</option>

and the onchange in the select tag does what your HREF link does.

onChange=imageChange()

With Javascript, you can read the value of the select box at that time, by:

document.<formname>.<selectname>.value

(Just replace the < > with the proper values)

This will then give you the path for the image...

Have a look at http://www.lostinoz.net I used it on a mouseover for the images on the left and the picture shows on the right.

All you need to do is alter it so that it is a dropdown that does the action, not the mouseover..

Note: if you keep the select tag the way it is - it won't work, as the value of each of the options needs to be the one taken - NOT the one that is in the my_win() function call...

[system]

Thx chancer, I followed your very good advice

now, just a small thing...
it almost works...

<select name="change_image" onChange="imageChange()">
<?php   

			    $sql = "SELECT * FROM tblImage ORDER BY ImageID ASC";
  				$result = mysql_query ($sql, $conn);
				$row = mysql_fetch_array($result, MYSQL_ASSOC);

			if (mysql_num_rows($result)>0) {
				while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
				$test="/php/pictures/";
				$str1 .= "<"."option value=\"" . $test. $row["FileName"] . "\">". $row["ImageID"]. " : ".$row["ImageDescription"] . "</option>";
				}
				print $str1;
			}
		?>

		</select>	
	<?php  
		$test="/php/pictures/";
	    print "<img src=\"".$test."0.jpg\" width=50 height=50 border=0 alt=\"\" name=\"picture\" align=\"absmiddle\">";

This is the whole thing
and this is the javascript

<Script language="javascript">
function imageChange() {

picimage=document.createright.change_image.value;
document['picture'].src=picimage;
}
</script>
[code=php] 

so...

it works, except : I have 5 images in my table, when I execute the mysql code, it gives all 5, but I only get 4 options in the dropdownlist
the 1ste one isn't showed...
why?????

like you can see, I have standard image 0.jpg shown...
if I take 1.jpg, it shows the 1th, but it still isn't show in the list, so I can't select it...

where is the error?
anybody....

if questions, just ask, ok???
thx for your help, in advance

[The_Chancer]

Try changing your code to this:

<select name="change_image" onChange="imageChange()"> 
<?php    

                $sql = "SELECT * FROM tblImage ORDER BY ImageID ASC"; 
                  $result = mysql_query ($sql, $conn); 
                $row = mysql_fetch_array($result, MYSQL_ASSOC); 

            for($i=0;$i<mysql_num_rows($result);$i++) { 
                while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 
                $test="/php/pictures/"; 
                $str1 .= "<"."option value=\"" . $test. $row["FileName"] . "\">". $row["ImageID"]. " : ".$row["ImageDescription"] . "</option>"; 
                } 
                print $str1; 
            } 
        ?> 

        </select>     
    <?php   
        $test="/php/pictures/"; 
        print "<img src=\"".$test."0.jpg\" width=50 height=50 border=0 alt=\"\" name=\"picture\" align=\"absmiddle\">"; 

Just the IF line to a for line... should work OK..

[system]

Thx chancer for the help...

I didn't try your solution, I found it myself...

It was stupid....

$result = mysql_query ($sql, $conn); 
$row = mysql_fetch_array($result, MYSQL_ASSOC); 

if (mysql_num_rows($result)>0) { 
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 

Anybody see the fault????
look carefully, it's so stupid, like always, something is shown 2 times...
there was the error, I fetch it 2 times... so second time the first record isn't collected anymore...

but, if anybody ever wants to use it, I will post the solution here
if you have questions, mail me and I will try to help...

<Script language="javascript">
function imageChange() {

picimage=document.createright.change_image.value;
document['picture'].src=picimage;
}
</script>

than, In the form :

<form name="createright" method="post" action="<?php echo($PHP_SELF) ?>">

  <select name="change_image" onChange="imageChange()">
			 <option value="/php/pictures/0.jpg">=Leave blank=</option>  

			<?php  

				$test="/php/pictures/"; 
			    $sql = "SELECT * FROM tblImage ORDER BY ImageID ASC";
  				$result = mysql_query ($sql, $conn);

			if (mysql_num_rows($result)>0) {
				while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

				$str1 .= "<"."option value=\"" . $test. $row["FileName"] . "\">". $row["ImageID"]. " : ".$row["ImageDescription"] . "</option>";
				}
			}
			print $str1;
		?>
		</select>	
	<?php  
		$test="/php/pictures/";
	    print "<img src=\"".$test."0.jpg\" width=50 height=50 border=0 alt=\"\" name=\"picture\" align=\"absmiddle\">";
		

Basic is : you just get the id or filename from the table...put it in the drop down list
when selected, that value is the one selected, here the filename is the value

the onChange = >calls a javascript, and there you the value of the selected image from the list is passed to...
than the value is pointed to the image

and the image 'picture' is replaced by the value that is selected in the list...

mmmmh, If you can still follow?

if questions : PM me or mail me or ...

Thx chancer, I really appreceate your help...
Without you I would have taken me a lot longer so...

Respect !!!!

[The_Chancer]

No worries...

Glad I could help...

Can you mark the thread resolved ??

Cheers,