Several Mouse Overs. need help.. [Archive]

svenny1

09-11-2008, 08:01 PM

Basically i have a few mouseovers which display a larger image - http://www.therow2.com/C-3

I want the larger image to link to another page (where it says read more if possible) but all i can get is the thumbnail(smaller picture) to get linked. I tried using an image map but this just linked to the same page throughout all the larger images.

Can anybody help me link each large picture to a page?

Code:
<table border="0">
<tr valign="bottom"><td rowspan="3"><img src="images/big4.png" name="big_image" border="0" usemap="#big_imageMap" /></td>
<td width="3"></td>
<td><a href="#"><img src="images/rollover4.jpg" width=130 OnMouseOver='big_image.src="images/big4.png";' border="0"></a></td>
<td width="13"></td><td><a href="sustainability.php"><img src="images/rollover1.jpg" OnMouseOver='big_image.src="images/big1.png";' width="130"></a></td></tr>
<tr><td></td><td><a href="scientificex.php"><img src="images/rollover2.jpg" width="130" onMouseOver='big_image.src = "images/big2.png"' border="0"></a></td>
<td></td><td><a href="capability.php"><img src="images/rollover6.jpg" width=130 onMouseOver='big_image.src="images/big6.png";'></a></td></tr>
<tr valign="top"><td></td><td><a href="educationout.php"><img src="images/rollover3.jpg" width="130" onMouseOver='big_image.src="images/big3.png";'></a></td>
<td></td><td><a href="capacitybuild.php"><img src="images/rollover5.jpg" onMouseOver='big_image.src="images/big5.png";' width="130"></a></td></tr>
</table>

vwphillips

09-12-2008, 10:40 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Swap(id,img,coords,url){
var imgobj=document.getElementById(id);
imgobj.src=imgobj.src.substring(0,imgobj.src.lastIndexOf('/')+1)+img;
var area=document.getElementById(imgobj.getAttribute('usemap').replace('#','')).getElementsByTagName('AR EA')[0];
area.coords=coords;
area.onclick=function(){ window.top.location=url; }

document.Show.Show1.value=area.coords; // Debug only
document.Show.Show0.value=url; // Debug only
// imgobj.src=

}
/*]]>*/
</script></head>

<body>
<table border="0">
<tr valign="bottom"><td rowspan="3"><img src="http://therow2.com/C-3/images/big4.png" id="big_image" border="0" usemap="#big_imageMap" /></td>
<td width="3"></td>
<td><a href="#"><img src="http://therow2.com/C-3/images/rollover4.jpg" width=130 OnMouseOver="Swap('big_image','big4.png','110,200,150,100','http://www.codingforums1.com/');" border="0"></a></td>
<td width="13"></td><td><a href="sustainability.php"><img src="http://therow2.com/C-3/images/rollover1.jpg" OnMouseOver="Swap('big_image','big1.png','120,200,150,100','http://www.codingforums2.com/');" width="130"></a></td></tr>
<tr><td></td><td><a href="scientificex.php"><img src="http://therow2.com/C-3/images/rollover2.jpg" width="130" OnMouseOver="Swap('big_image','big2.png','130,200,150,100','http://www.codingforums3.com/');" border="0"></a></td>
<td></td><td><a href="capability.php"><img src="http://therow2.com/C-3/images/rollover6.jpg" width=130 OnMouseOver="Swap('big_image','big6.png','140,200,150,100','http://www.codingforums4.com/');"></a></td></tr>
<tr valign="top"><td></td><td><a href="educationout.php"><img src="http://therow2.com/C-3/images/rollover3.jpg" width="130" OnMouseOver="Swap('big_image','big3.png','150,200,150,100','http://www.codingforums.com5/');"></a></td>
<td></td><td><a href="capacitybuild.php"><img src="http://therow2.com/C-3/images/rollover5.jpg" OnMouseOver="Swap('big_image','big5.png','160,200,150,100','http://www.codingforums.com5/');" width="130"></a></td></tr>
</table>
<map name="big_imageMap" id="big_imageMap">
<area shape="rect" coords="100,200,150,100" />
</map>
DEbugOnly<br />
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
</body>

</html>