Home arrow DHTML arrow Page 2 - Dynamically Positioned Layers by Mouse Position
DHTML

Dynamically Positioned Layers by Mouse Position


One method of providing additional options to users is to present a menu that displays itself when necessary, such as when users click or just hover over an item. This article explains how to produce such a DHTML menu, which dynamically positions itself where the user’s mouse is.

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 44
June 14, 2005
TABLE OF CONTENTS:
  1. · Dynamically Positioned Layers by Mouse Position
  2. · The XHTML
  3. · The JavaScript

print this article
SEARCH DEVARTICLES

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!


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials