Loading different image maps

@KingKoenDec 12.2005 — #I think this can be done, but it is not the way to go. You should always try to separate the visual representation of your page and the sematics of its elements. This has many benefits, like making your page accessible for visually handicapt people, making it easier for (google) bots to spider your page, logical behaviour when using shortcut keys (like the tab key), etc (see also the [URL=http://www.w3.org/TR/WAI-WEBCONTENT/]W3C site[/URL].

For example: in your case you want to be able to click on the submenu elements. All of this submenu elements are in fact hyperlinks to other pages. The sematical representation for such a link is the HTML A element. The visual representation you chose is a picture. This can be accomplished using CSS.

So in your case this would be something like:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>.: STEPHEN KNOX : ONLINE PORTFOLIO :.</title>
 <style type="text/css">
 body {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 12px;
 background-color: #333333;
 margin: 0;
 padding: 0;
 text-align: center;
 }
 table {
 margin: 10px 0 0 0;
 width: 750px;
 height: 100%;
 border: 5px solid #000000;
 background-color: #FFF; 
 }
 table td {
 padding: 0;
 text-align: center;
 
   }
   #content {
   text-align: left;
   padding: 10px
   }
   #mainMenu {
   position: relative;
   padding: 0;
   margin: 0;
   width: 750px;
   height: 87px;
   background: transparent url(http://www.stephenknox.com/newsite/newsite.jpg) left top no-repeat;
   }
   #mainMenuItem1,
   #mainMenuItem2,
   #mainMenuItem3,
   #mainMenuItem4 {
   position: relative;
   display: block;
   width: 110px;
   height: 20px; 
   float: left;
   margin-top: 60px;
   }
   #mainMenuItem1 {
   margin-left: 20px;
   }
   #subMenu1,
   #subMenu2,
   #subMenu3,
   #subMenu4 {
   position: absolute; 
   display: block;
   height: 20px; 
   top: 87px; 
   }
 
   #subMenu1 a,
   #subMenu2 a,
   #subMenu3 a,
   #subMenu4 a {
   display: block; 
   height: 100%;
   float: left; 
   }
 
   #subMenu1 {
   width: 82px;
   left: 80px; 
   }
   #subMenu1 a#subMenu1Item1 {
   width: 90px; 
   background: transparent url(http://www.stephenknox.com/newsite/sub_home.jpg) -72px top no-repeat;
   }
 
   #subMenu2 {
   width: 380px;
   left: 180px; 
   }
   #subMenu2 a#subMenu2Item1 {
   width: 80px; 
   background: transparent url(http://www.stephenknox.com/newsite/sub_gallery.jpg) -76px top no-repeat;
   } 
   #subMenu2 a#subMenu2Item2 {
   width: 40px; 
   background: transparent url(http://www.stephenknox.com/newsite/sub_gallery.jpg) -156px top no-repeat;
   } 
   #subMenu2 a#subMenu2Item3 {
   width: 105px; 
   background: transparent url(http://www.stephenknox.com/newsite/sub_gallery.jpg) -196px top no-repeat;
   } 
   #subMenu2 a#subMenu2Item4 {
   width: 120px; 
   background: transparent url(http://www.stephenknox.com/newsite/sub_gallery.jpg) -300px top no-repeat;
   } 
  </style>
 </head>
 
 <body>
 <table cellspacing="0">
 <tr>
 <td>
 <div id="mainMenu">
 <a href="" id="mainMenuItem1"></a>
 <div id="subMenu1">
 <a href="" id="subMenu1Item1"></a>
 </div>
 <a href="" id="mainMenuItem2"></a>
 <div id="subMenu2">
 <a href="" id="subMenu2Item1"></a>
 <a href="" id="subMenu2Item2"></a>
 <a href="" id="subMenu2Item3"></a>
 <a href="" id="subMenu2Item4"></a>
 </div>
 <a href="" id="mainMenuItem3"></a>
 <div id="subMenu3">
 <a href="" id="subMenu3Item1"></a>
 <a href="" id="subMenu3Item2"></a>
 <a href="" id="subMenu3Item3"></a>
 </div> 
 <a href="" id="mainMenuItem4"></a> 
 <div id="subMenu4">
 <a href="" id="subMenu4Item1"></a>
 </div> 
 </div>
 <div id="content">
 <p>Tester</p>
 <p>123</p>
 </div>
 </td>
 </tr>
 </table>
 </body>
 </html>[/CODE]

Using one of the many JavaScript menu open source functions you can hide and show the submenu's after a mouseClick on one of the mainMenu items.

No more time. Got to go. Hope you can use it.

Loading different image maps

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Loading different image maps

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴