On Mon, 27 Mar 2006 07:46:10 -0800, in
microsoft.publi c.dotnet.framew ork.aspnet Rusty
<ru***@pleaseno emailthanks.com >
<OF************ **@TK2MSFTNGP12 .phx.gbl> wrote:
| Hi, I've seen something on a web site that I want to do for our Intranet
| web site. I'm not advocating pop-ups but for our company app, this
| would be perfect.
|
| Please go to this page and hold your mouse over one of the rings.
| http://www.bluenile.com/product_cata...64&track=hero&
| elem=img
|
| The middle ring on the top brings up this page, but in a pop-up form.
|
| http://www.bluenile.com/product_deta...le.asp?oid=487
|
| Can someone show me how to do this? I'm not a javascript programmer so
| I'm not really good at this. If you can include the code to popup I
| would be really appreciative. The popup also does an arrow (sort of) on
| the popup - I don't need it to be that fancy.
|
| And yes, I was looking at the page for my wife! 10 year anniversary is
| coming up.
|
| Rusty
This is just a fancy Show/Hide div routine. Search google for
javascript + "show div".
Alternatively you could use CSS to do something similar.
----- Start of code -------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Mouse Over example</title>
<style type="text/css">
..Tooltip a {
margin: .5em 0 0 0;
padding: 0 14px 0 0
}
..ToolTip a span {
left: -9999px;
position: absolute; /*
Use 'position:absol ute' to push the span inside the anchor
way off the screen
*/
width: 900px
}
..ToolTip a:hover span, .ToolTip a:active span {
background: #DDE6FF;
border: 1px solid #444444;
color: #000000;
font-size: 80%;
left: 20px; /*
Take the previously hidden span and display it near the anchor
*/
line-height: 1;
padding: 5px;
text-decoration: none;
top: 20px;
width: 450px /*
This is just for looks...
*/
}
..ToolTip a:hover, .ToolTip a:active {
position: relative /*
On 'hover' set the anchor to 'position:relat ive' to get a
measuring point. Somehow IE doesn't like it when this is
in the '.col2 a' declaration...
*/
}
</style>
</head>
<body>
<p class="ToolTip" ><a href="#"><img src="../images/check.gif"
width="20" height="20" border="0" /> <span>This is where my text/table
etc goes</span> </a></p>
<p> </p>
<table width="100%" border="0" cellspacing="0" cellpadding="5" >
<tr align="left" valign="top">
<th align="left" valign="middle" nowrap="nowrap"
class="ToolTip" >Method 2 Using a table <a href="#"><img
src="../images/icon_info.png" alt="" width="32" height="32"
align="absmiddl e" /><span>
<table width="100%" border="1" align="left" cellpadding="5"
cellspacing="0" bgcolor="#FFFFF F">
<tr>
<th width="10%" align="left" valign="top"
nowrap="nowrap" >Line 1</th>
<td width="90%" align="left" valign="top">De scription
Line 1</td>
</tr>
<tr>
<th width="10%" align="left" valign="top">Li ne 2</th>
<td width="90%" align="left" valign="top">De scription
Line 2</td>
</tr>
</table>
</span></a></th>
</table>
</body>
</html>
---------------------------------------------------------------
I often wish that email had never been invented, but there’s
just no way I can get rid of it. So, day after day, several times
a day, I dutifully delete 99% of the emails I receive, and when
I’m not able to get at my email for a few days, I’ll leave the
machine at home running to pick it up every 10 minutes so I don’t
overflow some capacity somewhere, and just the other day I caught
myself wondering who will clean out my Inbox after I’m dead.
Charles Petzold. October 20, 2005
---------------------------------------------------------------
