[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now


onMouseOver in Image Maps

Posted on 2001-07-05
Medium Priority
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 400 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.


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

649 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