Stu Nicholls | CSSplay | CSS image map menu

Image map menu

Pre 2006

Information

This is the menu I used on my 'horizontal' style layout, see my archives.

I am reproducing it here as a demonstration of an image map for navigation.

Cascading Style Sheet

#info ul {
  margin:0 auto; 
  padding:0; 
  position:relative; 
  width:400px; 
  height:400px; 
  background:#fff url(insect/hex_nav.gif); 
  z-index:1; 
  overflow:hidden;
  }
#info li {
  list-style-type:none; 
  width:104px; 
  height:112px;
  position:absolute;
  }
#info a {
  display:block; 
  width:104px; 
  height:0; 
  color:#000; 
  text-decoration:none; 
  padding-top:112px; 
  background:transparent; 
  overflow:hidden; 
  z-index:10;
  }
* html #info a {
  height:112px; 
  he\ight:0;
  }
#info a#demos {
  position:absolute; 
  left:54px; 
  top:71px; 
  background:url(insect/demos.gif) no-repeat -112px 0;
  }
#info a#menus {
  position:absolute; 
  left:158px; 
  top:71px; 
  background:url(insect/menus.gif) no-repeat -112px 0;
  }
#info a#boxes {
  position:absolute; 
  left:2px; 
  top:156px; 
  background:url(insect/boxes.gif) no-repeat -112px 0;
  }
#info a#opacity {
  position:absolute; 
  left:106px; 
  top:156px; 
  background:url(insect/opacity.gif) no-repeat -112px 0;
  }
#info a#layouts {
  position:absolute; 
  left:210px; 
  top:156px; 
  background:url(insect/layouts.gif) no-repeat -112px 0;
  }
#info a#explorer {
  position:absolute; 
  left:54px; 
  top:241px; 
  background:url(insect/explorer.gif) no-repeat -112px 0;
  }
#info a#mozilla {
  position:absolute; 
  left:158px; 
  top:241px;
  background:url(insect/mozilla.gif) no-repeat -112px 0;
  }
#info a#demos:hover, 
#info a#menus:hover,
#info a#boxes:hover,
#info a#opacity:hover,
#info a#layouts:hover,
#info a#explorer:hover,
#info a#mozilla:hover {
  background-position: 0 0;
  }
#info a#demos:hover b, 
#info a#menus:hover b,
#info a#boxes:hover b,
#info a#opacity:hover b,
#info a#layouts:hover b,
#info a#explorer:hover b,
#info a#mozilla:hover b {
  display:none;
  }

xhtml

<ul>
  <li>
    <a id="demos" href="index.html">
      <b>demos</b>
    </a>
  </li>
  <li>
    <a id="menus" href="../menus/index.html">
      <b>menus</b>
    </a>
  </li>
  <li>
    <a id="layouts" href="../layouts/index.html">
      <b>layouts</b>
    </a>
  </li>
  <li>
    <a id="boxes" href="../boxes/index.html">
      <b>boxes</b>
    </a>
  </li>
  <li>
    <a id="mozilla" href="../mozilla/index.html">
      <b>mozilla</b>
    </a>
  </li>
  <li>
    <a id="explorer" href="../ie/index.html">
      <b>explorer</b>
    </a>
  </li>
  <li>
    <a id="opacity" href="../opacity/index.html">
      <b>opacity</b>
    </a>
  </li>
</ul>

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.