/    Sign up×
Community /Pin to ProfileBookmark

Image Map ID Conflicts

I am using a button to open an image map from which selecting a name will go to a page.

Below is the code:

The problem I’m having is a conflict with the “id” tags.

If I put the “id” tag inside the “div” tag, the menu drops down and returns onmouseout fine, but I can’t separate the names on the image into separate parts to be able to select. The whole image becomes the selection.

If I put the “id” tag in the image map I’m able to select the individual names on the image exactly how I want to but then the image map won’t drop down on mouseover.

I can have one or the other but not both.

Any help would be very much appreciated.

<!–first image (a button) used to control the second image–>
<a href=”menu2.map”><img src=”images/calculator.jpg” class=”menu2″ height=”20″ width=”111″ usemap=”#men2″ border=”0″ ISMAP onmouseover=”moveTopDown(menu12);” /></a>

<!– this is the map that actually moves when the id is in the div tag but the map doesn’t work–>
<div [B]id=”menu12″[/B] class=”menu12″
<a href=”menu12.map”><img src=”images/calcMenu.jpg” height=”218″ width=”124″ usemap=”#menu12″ border=”0″ ISMAP onmouseout=”moveTopUp(menu12);”/></a>

<1– with the id tag here in the map the map works fine but will not move–>
<map [B]id”menu12″[/B] name=”men12″>
<area shape=”rect” coords=”15,40,100,57″ href=”scientific.html”>
<area shape=”rect” coords=”15,72,100,89″ href=”business.html”>
<area shape=”rect” coords=”15,102,100,119″ href=”standard.html”>
<area shape=”rect” coords=”15,130,100,147″ href=”construction.html”>
<area shape=”default” href=”desktop.html”>
</map></div>

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisFeb 08.2007 — Perhaps the fact that you have the IMG inside an anchor is more than the browser can take.

What do you mean "the menu drops down"?

You may have to add mouseout/over to each AREA tag.
Copy linkTweet thisAlerts:
@argentum13authorFeb 08.2007 — Thanks for answering

By "Menu drops down" i mean after the mouseover on the button the menu moves downward (as I want it to) or opens downward.

Putting a mouseover beside each "area" does not work. It won't recognize the separate areas when i have the "id" in the "div" tag. It only recognizes the separate areas when I have the "id" in the "map" tag but then the menu won't open then.
×

Success!

Help @argentum13 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...