PDA

View Full Version : Image rollover Help


Dada78
01-27-2008, 10:12 PM
I am trying to install this image type view when you mouse over a thumbnail it will make it larger. This is the page where I am getting the code and what it is suppose to do.

http://www.jabezhosting.com/rollover/rollover2.html


Here is the page I am trying to put it on

http://www.mesquitechristmas.com/local/display.php?id=2

I am calling the images from a DB because each page will be different so I don't know if that is messing it up or not but when you mouse over the thumbnail it doesn't show the large image as you can see.

Here is my code in the head section.

<script type="text/javascript">
function loadImg(img){
var imgName = "<? echo $row['imgurl']; ?>"; // name of the big image
var srcs = ["<? echo $row['imgurl1']; ?>","<? echo $row['imgurl2']; ?>","<? echo $row['imgurl3']; ?>","<? echo $row['imgurl4']; ?>"]; // array of SRC's for the big images

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

Here is the code in the body.

<tr>
<td align="center"> <img src="<? echo $row['imgurl']; ?>" title="<? echo $row['displayname']; ?>" style="width: 460px; height: 345px;" name="<? echo $row['imgurl']; ?>" border="2"></td>
</tr>
<tr>
<td align="center"> <a onmouseover="loadImg(0); return false;" onmouseout="loadImg(4); return false;">

<img src="<? echo $row['imgurl']; ?>" title="<? echo $row['displayname']; ?>" style="width: 50px; height: 50px;"></a>&nbsp;
<a onmouseover="loadImg(2); return false;" onmouseout="loadImg(4); return false;">

<img src="<? echo $row['imgurl2']; ?>" title="<? echo $row['displayname']; ?>" style="width: 50px; height: 50px;"></a>&nbsp;
<a onmouseover="loadImg(3); return false;" onmouseout="loadImg(4); return false;">

<img src="<? echo $row['imgurl3']; ?>" title="<? echo $row['displayname']; ?>" style="width: 50px; height: 50px;"></a>

<a onmouseover="loadImg(2); return false;" onmouseout="loadImg(4); return false;">

<img src="<? echo $row['imgurl4']; ?>" title="<? echo $row['displayname']; ?>" style="width: 50px; height: 50px;"></a>&nbsp;
</td>
</tr>

I do ever use Js so I am not really familiar with it and how it works. So if someone could help me out with this that would be great.

-Thanks