Link to home
Start Free TrialLog in
Avatar of Steve Krile
Steve KrileFlag for United States of America

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.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?
Avatar of hielo
hielo
Flag of Wallis and Futuna image

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

Avatar of Steve Krile

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_skills.js" type="text/javascript" language="javascript"></script>

ASKER CERTIFIED SOLUTION
Avatar of Steve Krile
Steve Krile
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial