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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Show border when hovering over table cell - button needs to remain submittable...

    I'd like to have a border appear around the entire cell ("target") when the mouse hovers over it -- keeping in mind that the form needs to work! :) How is this possible with JavaScript? I tried using css to no avail.

    Code:
    <tr>
    	<td class="target">
    		<table border="0" cellpadding="1" cellspacing="2" style="margin-top: 10px; width: 600px">
    			<tr>
    				<td rowspan="2" class="_prod_1_image"><a href="<!--#ystore_catalog id=0300 field=image -->" rel="lightbox" title=""><img src="/gfx/products/msds_poster_tn.jpg" alt="" width="69" height="100" border="0"></a></td>
    				<td rowspan="2" class="_prod_2_tital"><br><b><!--#ystore_catalog id=0300 field=name --></b></td>
    				<td class="_prod_3_price"><!--#ystore_catalog id=0300 field=price format=html --></td>
    			<tr>
    				<td class="_prod_4_order"><form method="post" action="<!--#ystore_order id=0300 -->">
    				<input type="submit" value="Order">
    				</form></td>
    			</tr>
    		</table>
    	</td>
    </tr>

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,797
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
    
    <title></title>
    
    <style type="text/css"
    <!--
    
    #table1 td
    {
        border:1px solid #fff;
    }
    
    -->
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <script type="text/javascript">
    <!--
    
    function addBorder(state,obj)
    {
        if (state == 1)
            obj.style.border = "1px solid #000";
        else
            obj.style.border = "1px solid #fff";
    }
    
    -->
    </script>
    
    </head>
    
    <body>
    
    <table style="border:0;width:600px;margin:10px auto" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table id="table1" style="border:0" cellpadding="10" cellspacing="0">
                <tr>
                    <td onmouseover="addBorder(1,this);" onmouseout="addBorder(2,this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa.</td>
                    <td onmouseover="addBorder(1,this);" onmouseout="addBorder(2,this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa.</td>
                    <td onmouseover="addBorder(1,this);" onmouseout="addBorder(2,this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa.</td>
                <tr>
                    <td onmouseover="addBorder(1,this);" onmouseout="addBorder(2,this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa.</td>
                    <td onmouseover="addBorder(1,this);" onmouseout="addBorder(2,this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa.</td>
                    <td onmouseover="addBorder(1,this);" onmouseout="addBorder(2,this);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa.</td>
                </tr>
            </table>
        </td>
    </tr>
    </table>
    
    </body>
    
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Sweet, works great!


  •  

    Posting Permissions

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