mouse over images from mysql

[branding4you]

is there a way to mouse over the previous image and keep the previous image there but use png file that only has a play button in it.

I echo my images out like this so I cant use java in the start of the page as I dont have the image name untill the mysql has pulled the names out

here is the echo code:

<a href="http://www.google.com/">
<img src="this.src='http://www.website.com/website/imgshow/1.jpg" border="0"
onmouseover="this.src='http://www.website.com/website/imgshow/1.png';"
onmouseout="this.src='http://www.website.com/website/imgshow/1.jpg';"
/></a>

I have several java code that does this and html but this has me flustered for two days already, there are websites that have this like youtube that has the play button on the image, only diff is I want to do it on mouse over

[JorgeM]

I'm not sure if I fully understand. Are you not able to build your image elemenet at the time that you pull information from your mysql data source?

If for some reason you cant write the html at that time, are you able to write the data maybe to a hidden input element so that you can use javascript or jQuery to grab that data from the hidden element and then update the src attribute for the image on mouseover?

Here is an example if I understand you correctly..assuming your image element cant be changed for some reason, but you can write information to another element such as the hidden input...

<img id="image1" src="https://.../image1.jpg" height="100" width="100" />
<input id="hidden1" type="hidden" value="http://.../image2.jpg" />

<script>
  var over = $('#hidden1').val();
  var out = $('#image1').attr( "src" );

  $( "img" ).mouseover(function() {
     $(this).attr("src", over);
  }).mouseout(function() {
     $(this).attr("src", out);
  })
</script>

[branding4you]

What I wanted to do was pull my image names from MYSQL

So I declare $imagename = $row['image];

I have a buy now button in png that must display over the image wothout losing the image below. I could not get png files transparnecy to work and keep the image below.

So I ended up putting the image from mysql in the backround of a table 1 column 1 row then making a top image that is png and has a border that is transparent, and also my Buy Now button when the mouse moves over the Top image that is transparent

<?php

echo '<table height="120" border="0" cellpadding="0" cellspacing="0"><tr>';

//SELECT FROM MYSQL

//foreach loop here to assign image name to $imagename

$link = "http://www.google.co.za";
$imagename = "opt1a.png";
$topimage ="top.png";
$myImage_rollover = "wof.png";


//Loop Here with Column and pagination

?>

    <td background="<?php echo "prodimg/".$imagename ?>">
    <a href="<?php echo $link ?>">
    <img src="<?php echo "prodimg/".$topimage ?>" 
    onmouseover="this.src='<?php echo "prodimg/".$myImage_rollover ?>'" 
    onmouseout="this.src='<?php echo "prodimg/".$topimage ?>'" /></a>

<?php

echo "</td>";
echo "</tr></table>";  

?>

I have seen many websites doing it with play buttons on videos or music and even buy now buttons - but how to get it from mysql was beyond me, so I invented this method for myself ... lol
here is a link to go see it in action :)

It works a bit slow but its OK

http://bizshop.co.za/testing/imager2.php

if anyone has a SIMPLE method of doing this let me know but this works and I will use it like this for now, thank you Jorge