onMouseOver in Image Maps

Posted on 2001-07-05
Last Modified: 2008-02-26
I have an image map set up and wish to set the contents of the status bar when the mouse is moved over the various image sections.  I have added an onMouseOver and onMouseOut event to each of the <AREA> tags, but when the mouse moves over it, it just shows the HREF of the area.
Does the <AREA> tag support these events?

The HTML I'm using is below.

<table width="100%" bgcolor=#66ffff cellspacing="0" cellpadding="3">
      <br><br><center><b>Organisational Structure Diagram</b></center>
    <td align=center>
      <img src="/images/orghierarch.gif" border="0" usemap="#hierarchy">
<MAP NAME="hierarchy">
 <AREA onClick="funOrg('RO');return false;" SHAPE=rect COORDS="220,8,415,62" HREF="#" title="Regional Offices" onMouseOver="status='Show Regional Offices';return true" onMouseOut="window.status='';return true">
 <AREA onClick="funOrg('TR');return false;" SHAPE=rect COORDS="15,95,189,149" HREF="#" title="Trusts" onMouseOver="status='Show Trusts';return true" onMouseOut="window.status='';return true">
 <AREA onClick="funOrg('TS');return false;" SHAPE=rect COORDS="15,181,187,235" HREF="#" title="Trust Sites" onMouseOver="status='Show Trust Sites';return true" onMouseOut="window.status='';return true">
 <AREA onClick="funOrg('HA');return false;" SHAPE=rect COORDS="220,95,415,149" HREF="#" title="Health Authorities" onMouseOver="status='Show Health Authorities';return true" onMouseOut="window.status='';return true">
 <AREA onClick="funGP('GMPP');return false;" SHAPE=rect COORDS="220,354,415,408" HREF="#" title="General Practitioners" onMouseOver="status='Show GPs';return true" onMouseOut="window.status='';return true">
Question by:cquinn
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
LVL 53

Expert Comment

ID: 6256254

You have to remove the href. It uses up the mouseevent.  You are firing from
the onClick anyway so you don't need it. The mouseover is firing but is
hidden by the href mouseover.

LVL 15

Author Comment

ID: 6258695
Dino - this works, but has an unwanted side-effect - the cursor no longer turns to a hand when the mouse is placed over one of the image segments - obviously because there is no longer a hyperlink associated with the area tags.

Is there any way of having both?
LVL 53

Accepted Solution

COBOLdinosaur earned 100 total points
ID: 6259347
I tried styling area.  no go
I tried styling the map. no go
I tried a wrap around span. no go
I tried wrap around div. no go
I tried changing style on mouseover. no go

My final conclsion is your can't change the cursor style on an
image map.  So it looks like that is the trade off. You can have
the status message and pointer cursor or no status and hand cursor.

I don't think there is anything else I can try.

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 15

Author Comment

ID: 6259682
Thanks for that - you answered the original question, so you get the points.  I'll just have to ask the customer which they prefer and tell them they can't have both.
LVL 53

Expert Comment

ID: 6259753
Yeah, I've been there... I usually hear:"it seems it should be simple to do
both"...  Sometimes it is not easy being a developer, but it's just to much
fun to to give it up for a real job like truck driving.  Thanks for the A,
and good luck with the customer. :^)


Expert Comment

ID: 7736884
I know a way that you can get around this...

All you need to do is change your onMouseOver event to an onMouseMove event

This error doesn't seem to occur on all browsers... for example Mozilla doesn't have this problem, however explorer does.  All that is happening is the href's onMouseOver eventhandler changes the status after you change it with your onMouseOver event (basically writing over it).  So what you need to do is write over it after the href does.  That is what the onMouseMove does for you.

This may be too late for you do anything about it, but just so you know for future reference...


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Date on a table 16 37
BG appearing and then disappaear after a second 8 29
how to customize the text in the legend in highcharts 3 36
HTML question 2 28
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question