HORIZONTAL SLIDE-MENU WITH 1 IMAGEMAP ONLY
  • This script produces a real horizontal slide-menubased on 1 single imagemap. This means that you get a very individually looking design-menu and at the same time you benefit from a full-fledged slide-menu without caring about font-size, font-color etc.
  • Tested with Internet Explorer 5 and Netscape Navigator 4.7, both Win98.
    Installation:
  • Create an image that serves you as menubar. .
  • Put this image into the same folder as the HTML-file above.
  • Open your imagemaptool and create an imagemap out of the image.
  • Open the HTML-file and put the HTML-code for your imagemap into DIV-blocks like this:
    <DIV ID="menu0" CLASS="menu">
    <IMG SRC="menubar265.gif" USEMAP="#map0" BORDER=0>
    <MAP NAME="map0">
      <AREA SHAPE=RECT COORDS="7,8,53,49" href="#" onClick="javascript:openall()">
      <AREA SHAPE=RECT COORDS="7,52,52,92" href="#" onClick="javascript:closeall()">
       <AREA SHAPE=RECT COORDS="59,0,105,100" href="javascript265.html" target="main" onClick="javascript:show(0)">
      <AREA SHAPE=RECT COORDS="232,0,270,102" href="webbuilding265.html" target="main" onClick="javascript:show(1)">
      <AREA SHAPE=RECT COORDS="406,0,453,102" href="dhtml265.html" target="main" onClick="javascript:show(2)">
      <AREA SHAPE=RECT COORDS="580,0,628,102" href="xhtml265.html" target="main" onClick="javascript:show(3)">
      <AREA SHAPE=RECT COORDS="754,0,800,102" href="php265.html" target="main" onClick="javascript:show(4)">
      <AREA SHAPE=RECT COORDS="927,0,970,102" href="mainstart265.html" target="main" onClick="javascript:show(5)">
         <AREA SHAPE=RECT COORDS="105,0,231,102" HREF="submenu265.html" target="main">
        <AREA SHAPE=RECT COORDS="280,0,404,102" HREF="submenu265.html" target="main">
        <AREA SHAPE=RECT COORDS="455,0,578,102" HREF="submenu265.html" target="main">
        <AREA SHAPE=RECT COORDS="629,0,752,102" HREF="submenu265.html" target="main">
        <AREA SHAPE=RECT COORDS="801,0,924,102" HREF="submenu265.html" target="main">
        <AREA SHAPE=RECT COORDS="971,0,1000,102" HREF="http://www.24fun.com" target="_blank">
     </MAP>
    </DIV>
  • LIGHTBLUE: the hotspots for the two functions closing all submenus or opening all subemnus.
  • BLUE: the hotspots for the submenus. This is simple imagemap-linking.
  • RED: the hotspots for the main menus. In this sample we have six of them: 'javascript', 'webbuilding', 'dhtml', 'xhtml', 'php', 'home'.
  • RED: take care that the 'onClick="javascript:show(indexnumber)"' looks like in sample above.
  • GREEN: take care that each main-menu gets a indexnumber starting with zero.
  • BROWN:the file-name of your imagemap.
  • GREY: The DIV-container containing the code for your imagemap!
  • AND NOW TRICKY PART 1: If you use six main-menus (as in this sample) you need six of those DIV-containers. Those six DIV-containers contain all the same imagemap-code. However each of these containers has a different indexnumber starting with zero (THE BIG BLACK ZEROS in this sample).
  • AND NOW TRICKY PART 2: Transfer the x-coordinates form the imagemap (the darkred numbers) into the Array variable menutitle[indexnumber]. You find the Array variable in the head-section of the script. See sample below:
    var menutitle=new Array()
    menutitle[0]="0,105"
    menutitle[1]="232,279"
    menutitle[2]="406,453"
    menutitle[3]="580,628"
    menutitle[4]="754,800"
    menutitle[5]="927,999"
    IMPORTANT EXCEPTION: the very first digital must be 0 (otherwise the closing-all or opening all-function will not be displayed!!!)
  • Now it's almost done. Just configure the variables of the script (positioning, width of menubar etc.) and you are ready for testing.