AnyLink CSS Menu

[Glen]

Anylink CSS Menu

I have this working just fine until i decide to place the onmouseclick and onmouseover events into an <area> tag for my image map rather then an <a> tag. If within an <area> tag the menu will drop down on the far left side of the browser( FireFox 1.5.0.1 ) or too high ( Internet Explorer 6 SP1 ).

If just in an <a> tag then it works flawlessly in both browsers. I am guessing one of the javascript functions has trouble referencing some information from the <area> tag? does anyone know how to fix this.

[jscheuer1]

Not off hand, search through previous posts (use the Search link at the top of the page) there may be something on this. Image maps can be tricky, especially if the syntax or layout is non-standard and/or when javascript gets thrown into the mix. Generally these issues can be resolved:

Please provide your code -

PLEASE: Include the URL to your problematic webpage that you want help with. (Best)

OR:

Put code tags:

[code]

code goes here

[/code]

around your code in a message here so that it appears like so:

code goes here

[Glen]

Actually I did do a search but the search engine on this board doesn't find any keywords that would actually be usefull and that i know are in some posts, I have no idea why.

The webpage is on my computer I always test it and build most if not all the content and functionality before uploading.

Here is some relevant code:

<!-- Menu Navigation Image Map -->
<map name="menu" id="menu">
 <area shape="rect" href="index.htm" coords="4,90,66,120" alt="Home" />
 <area shape="rect" href="index.htm" coords="78,90,164,120" alt="Quizzes" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'quizzes')" />
 <area shape="rect" href="index.htm" coords="174,90,242,120" alt="Poems" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'poems')" />
 <area shape="rect" href="index.htm" coords="254,90,320,120" alt="About" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'about')" />
 <area shape="rect" href="index.htm" coords="332,90,414,120" alt="Contact" />
</map>

<!-- Drop Down Menu's for MNIM -->
<div id="quizzes" class="link">
 <a href="index.htm">Top Ranked</a>
 <a href="index.htm">Most Recent</a>
 <a href="index.htm">Most Popular</a>
 <a href="index.htm">Browse All</a>
</div>

<div id="poems" class="link">
 <a href="index.htm">Top Ranked</a>
 <a href="index.htm">Most Recent</a>
 <a href="index.htm">Most Popular</a>
 <a href="index.htm">Browse All</a>
</div>

<div id="about" class="link">
 <a href="index.htm">This Site</a>
 <a href="index.htm">Site Author</a>
</div>

Both the css and javascript file are linked in properly, otherwise the menu wouldn't work at all obviously. I attempted placing the div's underneath the <area> definition for each menu but that didn't help.

And here is the bit later added amongst the main content that works just fine as it should:

<a href="http://www.chessoscorner.com/site/" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'test')" target="_blank">Chesso's Corner</a>

     <div id="test" class="link">
      <a href="index.htm">Test</a>
      <a href="index.htm">Test..2</a>
      <a href="index.htm">Test..3</a>
     </div>

[Glen]

Hello everybody, i am pleased to say after staring at the same code for over an hour my programming knowledge finally kicked me in the backside and made me realise what was going on and how i could modify it to work for me.

Looking at my code above or basically the way i am using an image map you can very easily get this script to work for it by following these instructions:

In the JS File Find:

function dropdownmenu(obj, e, dropmenuID){

Replace With:

function dropdownmenu(obj, e, dropmenuID, imgmapX){

In This function Find:

dropmenuobj.x=getposOffset(obj, "left")

Replace With:

dropmenuobj.x=getposOffset(obj, "left") + imgmapX + 6 /* Image map X plus Extra X */

Then all you need to do is modify the onomouseover function call to dropdownmenu() in your html to include an extra parameter which is what you set for the X(left) position of the image map.

This may not work for everyone's situation, and the dropmenuobj.y may also need modification depending on where your menu sections of an image are. Mine go to the bottom of the image so using the code for it as is works fine.

EDIT: Here is an example of how i use it with the <area> tag now:

<area shape="rect" href="index.htm" coords="78,90,164,120" alt="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'test', 78)" />

The first parameter of the coords attribute is 78 which is the X(left) position, this is what you need to send along as the extra parameter for dropdownmenu() as shown above.