Page 1 of 1

wanting mouse over images from database

Posted: Thu Jun 22, 2006 3:00 am
by nutstretch
I am trying to workout if what i want to do will work. When the user clicks on a image in a page it takes them to a php page which needs to display the information about that image. there will be 3 seperate colours availabe for the product and what I would like to do is allow display the 3 different colour images and allow mouse over to a bigger image. the other details about that product need also to be displayed. A can do the mouse over bit with javascript but i am struggle to work out how i can get the script to prelod images for that product only.

Any suggestions would be appreciated.

Nuts

Posted: Thu Jun 22, 2006 3:56 am
by GM
I'm assuming you've got some kind of product ID code? Are you storing the images in a database, or are you storing the filepath of the image in the database?

I'm not sure I understand the problem - the simplest thing to do would be that when the user clicks on the product image, you open the next page (let's call it "product_detail.php") with a querystring parameter "product_id=" and then the product ID of the product they clicked on - like product_detail.php?product_id=00023

Then, product_detail.php takes the product_id from the $_GET superglobal, and selects the relative images from the database, loading to the page (but with style attribute with "display: none", so that they don't display), then you can use your javascript to display/hide with the onMouseover event.

Posted: Thu Jun 22, 2006 7:07 am
by nutstretch
thanks for answer

i am getting the images as you assume. the image has the same name as the product id so I concatenate the file path and imagename to get the image displayed.

$largeimage = "designerscarfs/".$scarf.".gif";

what i can't work out is how the javascript will know that these images are to be used.

the code that am using at present to load the images is

Code: Select all

<script type="text/javascript">
function loadImg(img){
var imgName = "big4"; // name of the big image
var srcs = ["designerscarfs/bigblue.gif","designerscarfs/bigblue.gif","designerscarfs/biggreen.gif","designerscarfs/bigorange.gif","designerscarfs/bigpurple.gif"]; // array of SRC's for the big images

document.images[imgName].src=srcs[img];
}
</script>

Can i incorpoate this in php so that the file paths are added here? where at present it says designerscarfs.bigblue.gif

the code at present for the mouse over is:

Code: Select all

<td><img src="designerscarfs/bigpurple.gif" alt="Big 4" name="big4" width="300" height="300" border="2" style="width: 400px; height: 404px;"></td>
    <td><p><a onMouseOver="loadImg(0); return false;" onMouseOut="loadImg(4); return false;"  href="designerscarfs.php?id=Feather">
Or do I have to go down a different route. Does anyone know anywhere where there are examples of what I am attempting to do?

Thanks in anticipation

Nuts

Posted: Thu Jun 22, 2006 7:54 am
by GM
Can you edit your post to use the CODE tags, to make it more readable?

It looks like you are using javascript to load the pictures on the fly... it might be a better strategy to load all the pictures first, but have them hidden until the mouseover event is fired - then, instead of loading the picture, you change the "display" property in the style.

You can use PHP to set Javascript variables:

Code: Select all

<script language="javascript">
var myVariable = "<?php echo $_SESSION['myVariable'];?>";
var myOtherVariable = "Hello";
...
...
if this helps?

Posted: Thu Jun 22, 2006 10:52 am
by nutstretch
Does that mean I can do this as

Code: Select all

script type="text/javascript"> 
function loadImg(img){ 
var imgName = "big4"; // name of the big image 
var srcs = ["<?php echo $_SESSION['$imagethumb'];?>", ["<?php echo $_SESSION['$imagethumb'];?>",["<?php echo $_SESSION['$imagethumb'];?>"]; // array of SRC's for the big images 

document.images[imgName].src=srcs[img]; 
}
</script>
This will only bring in the first variable though. Sorry really thick today.

my code at present for getting the images from the database is:

Code: Select all

$sql = "SELECT * FROM tblproducts WHERE Name LIKE '$name' AND online LIKE '$online'";


If ($resultID = mysql_query($sql, $linkID))  {
While ($row = mysql_fetch_array($resultID)) {
	$code = $row['ProductCode'];
	$imagethumb = "designerscarfs/".$code."_t.gif";

	print "<td><img src='$imagethumb'>";
	}
	print "</td></tr></table>";
}
else

{
die(mysql_error());
}
This give me my 3 images side by side as I want them but i need to get them into 3 different variables for the java script don't I?
Do i need to work out a way to hold them in seperate vaiables for the javascript?

I understand that this code will then go above the javascript code so that the variables are populated.

Any help gratefully recievved

Nuts