Solved

Order of onmouseover events with image and imagemap

Posted on 2008-10-23
3
1,015 Views
Last Modified: 2012-05-05
So, this must be an order of operation thing.  In IE this works perfectly:

        <img id="img_123" src="img/skill1.png" class="skillImg"
             usemap="#skillMap" ismap="ismap"
             onmouseover="document.getElementById('tempsid').value=this.src;this.src='img/skill' + hoverSkill.valueOf + '.png';this.className='skillImg dim';"
             onmouseout="this.src='img/skill1.png';this.className='skillImg';"
                  />


<map id="skillMap" name="skillMap" style="boder:solid 1px red;">
    <area shape="rect" coords="0,0,12,12" title="In Training"
          onmouseover="swapImage(1);" />
    <area shape="rect" coords="13,0,24,12" title="Trained/Monitored"
          onmouseover="swapImage(2);" />
    <area shape="rect" coords="13,13,24,24" title="Qualified at Standard Rate"
          onmouseover="swapImage(3);" />
    <area shape="rect" coords="0,12,12,24" title="Trainer"
          onmouseover="swapImage(4);" />
</map>

<script language="JavaScript" type="text/javascript">

var hoverSkill = new Object();
hoverSkill.valueOf = 0;


function swapImage(val) {
    hoverSkill.valueOf = val;
}
</script>


In Firefox, the image map onmouseover event works fine, but the image mouseover event doesn't fire.


So, is that it.  IE will perform both the image and map mouseover events, while Firefox will only handle the map mouseover events?
0
Comment
Question by:Steve Krile
  • 2
3 Comments
 
LVL 82

Expert Comment

by:hielo
Comment Utility
make sure you put:
<script language="JavaScript" type="text/javascript"> 
var hoverSkill = new Object();
hoverSkill.valueOf = 0; 

function swapImage(val) {
    hoverSkill.valueOf = val;
}
</script> 
BEFORE the <map id="skillMap" name="skillMap" style="boder:solid 1px red;">...</map> 
Otherwiser hoverSkill will be out of scope

Open in new window

0
 
LVL 16

Author Comment

by:Steve Krile
Comment Utility
I have.  The script is loaded at the top of the page in a script tag in the head like:

<script type="text/javascript" src="js/ManageEmployees_skills.js" type="text/javascript" language="javascript"></script>

0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 0 total points
Comment Utility
Shadow's answer on this link seems to cover it.  There is a difference in the way IE and FireFox handle image maps, and there's no "good" way to overcome that difference.

http://forums.techguy.org/web-design-development/404275-image-map-firefox.html



Just some extra info.

XHTML 1.0 doctypes require an id attribute for the map element, but also allow the name attribute if it has the same value as the id attribute.

The usemap attribute for the img, input and object element is of type "URI"; meaning that when you do usemap="#somemap", the value is a resolved value of location.href + #somemap, which references an element in the document with a name or id of somemap. So if the page is http://somesite.com/test.html and you have usemap="#somemap", internally in the browser, the usemap value would be http://somesite.com/test.html#somemap .

With the XHTML 1.1 doctype, id is required for the map element, but the name attribute is not allowed. The usemap attribute for img, input and object is of type "idref"; meaning the value is just a reference to an id and when you do usemap="somemap", it just references an element with id="somemap". Because it's just an idref, # isn't allowed in the usemap attribute value.

As for browsers:

IE, Opera and Safari only support image maps the "uri" way regardless of doctype or mime type. Safari doesn't seem to support image maps for the input and object element at all. (at least 1.3).

Now Firefox goes by mime type. If you serve XHTML 1.0 or XHTML 1.1 as application/xhtml+xml, Firefox uses the idref way. If you serve XHTML 1.0 or XHTML 1.1 as text/html, Firefox uses the uri way. However, Firefox still plays nice and allows # when it's using the idref way.

(XHTML 1.1 is not to be served as text/html so you could say that Firefox is only in violation of xhtml 1.0. because the usemap type shouldn't change with the mime type. Firefox should follow the standard XHTML 1.0 doctypes regardless of the mime type. Serving as application/xhtml+xml means you can forget about IE)

If you serve XHTML 1.0 as text/html you really have no worries. If you serve it as application/xhtml+xml, you have to make sure both the name and id attributes are the same for the map element and use # so all application/xhtml+xml browsers are happy. Same thing goes for XHTML 1.1. Now at any time the validator complains (once you've done everything you are supposed to) you can always use a custom doctype or add attribute declarations to the doctype so the validator doesn't throw a fit. An example of this woud be for the XHTML 1.1 doctype, where you change the usemap type declaration to uri and add the name attribute to the map element.

As said above, Opera does't support XHTML 1.1 image maps, but there's a user javascript fix that makes them work while using fully compliant code with a non-modified XHTML 1.1 doctype served as application/xhtml.


0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

763 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

8 Experts available now in Live!

Get 1:1 Help Now