The following HTML is a simple example of a CSS image map. The mapped image in
this case is yahoo.gif which is the large red yahoo! at the top of the
www.yahoo.com homepage. For this example the 'h' in yahoo has been mapped.
When the mouse cursor is moved over the 'h' in yahoo, a border is displayed
around the 'h' and some text is displayed in a separate popup.
This example works correctly using IE6. The background of the popup is clipped
in Netscape/Firefox. It appears that the background color of the popup will
not extend beyond the edge of the block defined for the anchor located over the
'h' in yahoo. This is apparent by changing the left attribute of the popup
text (#imap1 a:hover span) which is currently set to 20px.
There is an obvious difference in functionality between IE and
Netscape/Firefox, but which is correct? The IE functionality is definitely
more desirable for this application. I would like to find a solution for all
the browsers. Any help would be greatly appreciated.
<html>
<head>
<title>Popup HTML</title>
<style type="text/css">
#imap1 {
display:block;
width:232px;
height:44px;
background:url(yahoo.gif) no-repeat;
position:relative;
}
#imap1 dd {
position:absolute;
padding:0;
margin:0;
}
#imap1 #area1 {
left:85px;
top:6px;
}
#imap1 a {
position:relative;
display:block;
width:42px;
height:29px;
text-decoration:none;
}
#imap1 a span, #imap1 a:visited span {
display: none;
}
#imap1 a:hover {
border:1px solid #000;
}
#imap1 a:hover span {
position: absolute;
top: 30px;
left: 20px;
display: block;
background: #fdd;
border: 1px solid red;
}
</style>
</head>
<body>
<dl id="imap1">
<dd id="area1"><a href="#"><span><table cellpadding="0" cellspacing="0"
border="0"><tr><td>Popup</td></tr><tr><td>text!</td></tr></table></span></a></dd>
</dl>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
