Solved

onMouseOver in Image Maps

Posted on 2001-07-05
6
952 Views
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">
  <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
Comment
Question by:cquinn
  • 3
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility

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
 
LVL 15

Author Comment

by:cquinn
Comment Utility
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 15

Author Comment

by:cquinn
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 

Expert Comment

by:MakiG
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS alignment question 8 37
Hover Gone 16 30
Swiper slider stops between pages 11 30
Bootstrap Columns not Side-by-Side 3 10
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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now