[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 814
  • Last Modified:

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

0
TrialUser
Asked:
TrialUser
2 Solutions
 
Daniel JungesCommented:

<html>
<head>
<script language="javascript"> 

function ShowCart(id) {
	var ele = document.getElementById(id);
	ele.style.display = "block";
}

function HideCart(id) {
	var ele = document.getElementById(id);
  ele.style.display = "none";            
}
 
</script>
</head>

<body>
<table>
<tr>
<td runat="server" id="tdShoppingCart" width="20%"  
style="background-color: #E5E5E5; height: 4px;" class="search">
<img src="myImage.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>
 </tr>
 </table>
 </body>
 </html>

Open in new window

0
 
Tom BeckCommented:
Give the divCart a location top:XXpx; left:XXpx; and visibility:hidden and apply the javascript.
<script language="javascript" type="text/javascript">
function ShowCart(divId) {
    document.getElementById(divId).style.display = 'block';
    document.getElementById(divId).style.visibility = 'visible';
}
function HideCart(divId) {
    document.getElementById(divId).style.display = 'none';
    document.getElementById(divId).style.visibility = 'hidden';
}
</script>

Open in new window

0
 
Eternal_StudentCommented:
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/
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
TrialUserAuthor Commented:
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
0
 
Eternal_StudentCommented:
This looks like it is pretty similar to what you need:

http://www.exit404.com/lab/unobtrusive-persistent-scriptaculous/
0
 
Eternal_StudentCommented:
The blind down effect is simply:

Effect.BlindDown
0
 
kadabaCommented:
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.
0
 
TrialUserAuthor Commented:
thanks t on for your response
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now