Dynamically Positioned Layers by Mouse Position - The XHTML
(Page 2 of 3 )
The XHTML
The example I’ll use is that of a clothing store. This store offers three products: hats, shirts, and socks. The user will be able to click on an image map (or a menu bar if you want), and be taken to information for that product.
The socks however, come in a variety of color options. We could simply direct a user to another page from which they navigate to the page for the color they want. But our experience as web designers and usability ‘experts’ dictates that we need to eliminate all unnecessary clicks, making the navigation path as short as possible. We can eliminate that click by showing them a quick menu, and take them directly to the specific page.
Here’s the (X)HTML for the image map. I’ve extracted the style information and the JavaScript, and will explain them each separately.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
/* JavaScript section of article */
</script>
<title>DHTML Layers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<style type="text/css">
<!--
/* css section of article */
-->
</style>
<p align="center"><img alt="clothes we offer"
src="/images/person.jpg" height="420" width="250"
usemap="#clothesMap" border="0" /></p>
<map id="clothesMap" name="clothesMap">
<area onmouseover="displayObject('sockOptions',
false);" shape="CIRCLE" alt="Hat" coords="123,40,23"
href="hat.htm">
<area onmouseover="displayObject('sockOptions', false);"
shape="CIRCLE" alt="Shirt" coords="127,146,58"
href="shirt.htm">
<area onmouseover="moveObject('sockOptions', event);"
shape="CIRCLE" alt="Socks" coords="152,368,22"
href="socks.htm">
</map>
<div class="options" id="sockOptions" style="left: 10px;
width: 80px; position: absolute; top: 30px; height: 40px">
<a href="socks1.htm">Green socks</a><br />
<a href="socks2.htm">White socks</a><br />
<a href="socks3.htm">Plaid socks</a>
</div>
</body>
</html>
Nothing earth shattering here. There’s a basic image map, which is presumably a person wearing the available hat, shirt, and socks (and hopefully more). When you click on the hat or shirt area, you’re taken to those pages. However, when you move your mouse over the socks, that’s when the magic happens. The moveObject function is called, with ‘sockOptions’ and ‘event’ as the parameters. I’ll explain these later. I also made sure for usability’s sake that when you move your mouse over any other area, the sock menus returns to its invisible state.
It’s important to note that if you were to click on the socks, you’d still be directed to a generic - or parent – socks page. This is to ensure that even those visitors who don’t have standards compliant browsers are still able to eventually navigate to the socks they want, they just have to suffer through that one extra click.
Now I’ll quickly explain the styling of the invisible menus.
The CSS
It would be beneficial to specify a class for these menus, rather than a definition for the specific menu. This is because there’s a very good chance that you’ll re-use these menus quite extensively. So here’s the basic style definition:
.options {
font-family: arial;
font-size: 11px;
border: solid 1px #999;
font-size:11px;
background-color: #fff;
z-index:2;
padding: 2px;
visibility: hidden;
display: none;
}
So this gives us a box that would stand out and above other elements on the page, with a solid background and border, as well as a higher z-index. I say ‘would’ because we’ve also defined it to be invisible. The inline style defines the absolute positioning, but that really doesn’t matter, as it will be changed by the JavaScript. The following styles are optional, but recommended if the layer is menu style, as it serves to differentiate the item links, make it more apparent that it’s a menu of links rather than a simple box of text.
.options a:link {
padding: 1px;
text-decoration: none;
}
.options a:hover {
background-color:#CCC;
}
This way each link is individually highlighted as the mouse moves over it. Now, let’s move into the code that will actually turn this HTML into DHTML!
Next: The JavaScript >>
More DHTML Articles
More By Justin Cook
/ 34 
