Anylink CSS Menu Image Map Positioning

[dmetraux]

AnyLink CSS Menu
http://www.dynamicdrive.com/dynamici...anylinkcss.htm

Here's my issue. I'm implementing the Anylink CSS menu on a page with an image map navigation. On IE the links are appearing at the top of the page in a staggered format. On FF the images are appearing correctly under the image, but they do not align properly with the imagemap coordinates.

I've tried positioning (absolute, relative, etc) on the body, the image that is mapped, and each individual link but nothing is working. I think I'm missing something very basic and could use some help!

the webpage is http://www.davidmetraux.com/index3.html

Thanks very much!

[jscheuer1]

Image maps are odd and not all browsers treat their elements as true objects in the DOM sense that this script expects. As long as your image map uses only square shapes (as yours does), this modified getposOffset() function will take care of that for IE6, FF1.5.0 and Opera8:

function getposOffset(what, offsettype){
if (what.parentNode&&typeof what.parentNode.tagName!=='undefined'&&what.parentNode.tagName.toLowerCase()=='map'){
var ocoords=what.coords.split(',')
var totaloffset=(offsettype=="left")? ocoords[0]*1 : window.opera? ocoords[3]*1 : ocoords[1]*1;
var parentEl=what.parentNode.parentNode;
}
else {
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
}
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

Substitute it for the existing one in anylink.js:

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

Notes: If you also use anylinkcss on the same page for dropdowns for 'normal' elements, the branching code in this new function will revert to the original method for those dropdowns. In other words it will work with image maps that use square shapes as well as ordinary trigger links.

[dmetraux]

Thanks for your help and really fast response. I made the change and now FF behaves like IE with the misplaced navigation bars at the top of the screen. I could probably fix these with coordinate changes, but I think I will just slice up the image and remove the image maps to avoid spacing differences between IE and FF.

thanks again.

[jscheuer1]

I didn't have that problem but, perhaps you are using an earlier version of FF. I did move the map and dropdowns in the code to just below the image that uses them. If you were to do that as well, it might take care of the problem:

    <td colspan="2" class="black"><img ismap="ismap" usemap="#TOPBAR" border="0" height="24" width="780" src="images/navigation/homegrey780.jpg" alt="top navigation" />
<map name="TOPBAR" id="TOPBAR">
  <area alt="Home" shape="rect" coords="0,0,88,20" href="index.html" />
  <area alt="Photographs" shape="rect" coords="89,0,243,20" href="pictures.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'photography')" />
  <area alt="Travelogues" shape="rect" coords="244,0,397,20" href="adventures.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'travelogues')" />
  <area alt="Resources" shape="rect" coords="398,0,536,20" href="resources/index.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'resources')" />
  <area alt="Personal" shape="rect" coords="537,0,661,20" href="personal.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'personal')" />

  <area alt="Feedback" shape="rect" coords="662,0,800,20" href="feedback.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'feedback')" />
  <area alt="Site Navigation" shape="default" nohref="nohref" />
</map>
	  	      <!--1nd anchor link and menu -->
      <div id="photography" class="anylinkcss" style="width: 200px; background-color: #DBDBDB"> <a href="pictures.html">Photography
          Gallery</a> <a href="news/2006/hurricane_katrina.html">Hurricane Katrina:
          Home</a> <a href="news/2006/hurricane_katrina_new_orleans.html">Katrina:
          New Orleans East</a> <a href="news/2006/hurricane_katrina_new_orleans_lower_ninth.html">Katrina:
          Lower Ninth Ward</a> <a href="news/2006/hurricane_katrina_french_quarter.html">Katrina:
          French Quarter</a> <a href="news/2006/hurricane_katrina_slidell.html">Katrina:
          Slidell &amp; Irish Bayou</a> <a href="news/2006/hurricane_katrina_gulf_coast.html">Katrina:
          Gulf Coast</a> <a href="news/2006/hurricane_katrina_signs_and_messages.html">Katrina:
          Signs &amp; Messages</a> <a href="news/2006/montreal_cartoon_protests.html">Danish
          Cartoon Protests</a> </div>

      <!--2nd anchor link and menu -->
      <div id="travelogues" class="anylinkcss" style="width: 200px; background-color: #DBDBDB"> <a href="http://www.davidmetraux.com/cambodia.html">Cambodia</a> <a href="http://www.davidmetraux.com/china.html">China</a> <a href="http://www.davidmetraux.com/denmark.html">Denmark</a> <a href="http://www.davidmetraux.com/england.html">England</a> <a href="http://www.davidmetraux.com/hongkong.html">Hong
          Kong</a> <a href="http://www.davidmetraux.com/iceland.html">Iceland</a> <a href="http://www.davidmetraux.com/ireland.html">Ireland</a> <a href="http://www.davidmetraux.com/italy.html">Italy</a> <a href="http://www.davidmetraux.com/japan.html">Japan</a> <a href="http://www.davidmetraux.com/macau.html">Macau</a> <a href="http://www.davidmetraux.com/peru.html">Peru</a> <a href="http://www.davidmetraux.com/philippines.html">Philippines</a> <a href="http://www.davidmetraux.com/singapore.html">Singapore</a> <a href="http://www.davidmetraux.com/switzerland.html">Switzerland</a> <a href="http://www.davidmetraux.com/thailand.html">Thailand</a> <a href="http://www.davidmetraux.com/centralny.html">USA
          (Central NY)</a> <a href="http://www.davidmetraux.com/westva.html">USA
          (West Virginia)</a> <a href="http://www.davidmetraux.com/vatican.html">Vatican
          City</a> <a href="http://www.davidmetraux.com/vietnam.html">Vietnam</a> </div>

      <!--3rd anchor link and menu -->
      <div id="resources" class="anylinkcss" style="width: 200px; background-color: #DBDBDB"> <a href="http://www.davidmetraux.com/resources/index.html">Resources
          Coming Soon</a> </div>
      <!--4th anchor link and menu -->
      <div id="personal" class="anylinkcss" style="width: 200px; background-color: #DBDBDB"> <a href="http://www.davidmetraux.com/me.html">David
          Metraux</a> <a href="http://www.elizabethmetraux.com">Elizabeth Metraux</a> <a href="http://www.davidmetraux.com/redcross/index.html">Red Cross Youth Services</a> <a href="http://www.davidmetraux.com/daniel/">Daniel
          Metraux</a> <a href="http://www.alfredmetraux.com">Alfred Metraux</a> <a href="http://www.davidmetraux.com/daniel/rhoda.html">Rhoda
          Metraux</a> <a href="http://www.davidmetraux.com/metraux_publications">Family
          Publications</a> </div>

      <!--5th anchor link and menu -->
      <div id="feedback" class="anylinkcss" style="width: 200px; background-color: #DBDBDB"> <a href="http://www.davidmetraux.com/feedback.html">Feedback</a> <a href="http://www.davidmetraux.com/siteinfo.html">Site
          Info</a> <a href="http://www.davidmetraux.com/evolution.html">Site
          Evolution</a> <a href="http://www.davidmetraux.com/copyright.html">Copyright
          Statement</a> <a href="http://www.davidmetraux.com/update.html">Update
          Log</a> </div>
    </td>