...

View Full Version : Show border when hovering over table cell - button needs to remain submittable...



Errica
02-05-2007, 01:49 PM
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.



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

chump2877
02-05-2007, 03:34 PM
<!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>

Errica
02-05-2007, 04:01 PM
Sweet, works great!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum