Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    33
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Several Mouse Overs. need help..

    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:
    PHP 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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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('AREA')[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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •