asked on

show/hide Div on mouseover

I have an image in web page inside a td. On mouse hover I want to show a div, right below the image, and I want the div to look like a drop down from the td.

Please help. any suggestions , urls will be helpful.

<td runat="server" id="tdShoppingCart" width="20%"  
style="background-color: #E5E5E5; height: 4px;" class="search">
<img src="Assets/Images/Master/shoppingcart.jpg"                 style="height: 34px; width: 60px; "   onmouseover="ShowCart('divCart')" onmouseout="HideCart('divCart');" />
 <div    id="divCart"    style="display:none;       position:absolute;       border-style: solid; background-color: #E5E5E5; height: 4px;      padding: 5px;" class="search">
 ctent here</div>
 </td>

Open in new window

ASKER CERTIFIED SOLUTION

Daniel Junges

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eternal_Student

Why dont you use a javascript library such as Scriptaculous. There are many animations and effects you can use for this kind of thing, for example:

http://speckyboy.com/2008/04/26/20-top-scriptaculous-scripts-you-cant-live-without/

TrialUser

ASKER

Thanks for your response. My problem is how can i make sure the div is placed right below my td. It should appear like it is an extension of the td, as though it is a drop down from the td. Thanks. Please help

Eternal_Student

This looks like it is pretty similar to what you need:

http://www.exit404.com/lab/unobtrusive-persistent-scriptaculous/

Eternal_Student

The blind down effect is simply:

Effect.BlindDown

kadaba

using a library is always advantageous....
by the way in the previous post you could just very the position of the div and get it right down the td.

TrialUser

ASKER

thanks t on for your response