Steve Krile
asked on
Order of onmouseover events with image and imagemap
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.getE lementById ('tempsid' ).value=th is.src;thi s.src='img /skill' + hoverSkill.valueOf + '.png';this.className='ski llImg dim';"
onmouseout="this.src='img/ skill1.png ';this.cla ssName='sk illImg';"
/>
<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?
<img id="img_123" src="img/skill1.png" class="skillImg"
usemap="#skillMap" ismap="ismap"
onmouseover="document.getE
onmouseout="this.src='img/
/>
<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?
ASKER
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_sk ills.js" type="text/javascript" language="javascript"></sc ript>
<script type="text/javascript" src="js/ManageEmployees_sk
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window