[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 965
  • Last Modified:

onMouseOver in Image Maps

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">
  <tr>
    <td>
      <br><br><center><b>Organisational Structure Diagram</b></center>
    </td>
  </tr>
  <tr>
    <td align=center>
      <img src="/images/orghierarch.gif" border="0" usemap="#hierarchy">
    </td>
  </tr>
</table>
<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">
</MAP>
0
cquinn
Asked:
cquinn
  • 3
  • 2
1 Solution
 
COBOLdinosaurCommented:

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.

Cd&
0
 
cquinnAuthor Commented:
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?
0
 
COBOLdinosaurCommented:
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.

Cd&
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

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

 
cquinnAuthor Commented:
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.
0
 
COBOLdinosaurCommented:
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. :^)

Cd&
0
 
MakiGCommented:
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...

-MakiG
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now