Javascript Animation - IE problems

JavaScript
1

Hi Guys,

I’m working on an animation where mouseing over buttons changes the images…kind of difficult to explain but if you paste the following code into notepad / text editor of your choice you’ll see what I mean. Problem is it works perfectly in Firefox but for some reason in Internet Explorer doesn’t change the image on mouseover:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#fair-model {
width: 533px;
height: 400px;
padding-bottom: 30px;
background-image: url(http://i1195.photobucket.com/albums/aa391/chris_ne/fair-bg.jpg);
background-repeat: no-repeat;
position: relative;
}

.target {
height: 55px;
width: 127px;
position: absolute;
z-index: 10000000;
}

#target1 {
top: 15px;
left: 93px;
}

#target2 {
top: 91px;
left: 14px;
}

#target3 {
top: 91px;
left: 172px;
}

#target4 {
top: 176px;
left: 93px;
}

#fair-model img {
display: none;
position: absolute;
padding:0;
margin:0;
border:none;
}

#fair-model p {
display: none;
position: absolute;
top: 250px;
color: #000000;
font-size: 12px;
font-weight: bold;
width: 288px;
padding: 15px;
}

</style>

<script type="text/javascript">
function hide_FAIR() {
var fair_img1 = document.getElementById('fair1');
var fair_para1 = document.getElementById('para1');
var fair_img2 = document.getElementById('fair2');
var fair_para2 = document.getElementById('para2');
var fair_img3 = document.getElementById('fair3');
var fair_para3 = document.getElementById('para3');
var fair_img4 = document.getElementById('fair4');
var fair_para4 = document.getElementById('para4');
fair_img1.style.display = 'none';
fair_para1.style.display = 'none'; 
fair_img2.style.display = 'none'; 
fair_para2.style.display = 'none'; 
fair_img3.style.display = 'none'; 
fair_para3.style.display = 'none'; 
fair_img4.style.display = 'none'; 
fair_para4.style.display = 'none'; 
}

function show_F() {
hide_FAIR();
var fair_img = document.getElementById('fair1');
var fair_para = document.getElementById('para1');
fair_img.style.display = 'block';
fair_para.style.display = 'block';

}

function show_A() {
hide_FAIR();
var fair_img = document.getElementById('fair2');
var fair_para = document.getElementById('para2');
fair_img.style.display = 'block';
fair_para.style.display = 'block';

}

function show_I() {
hide_FAIR();
var fair_img = document.getElementById('fair3');
var fair_para = document.getElementById('para3');
fair_img.style.display = 'block';
fair_para.style.display = 'block';

}

function show_R() {
hide_FAIR();
var fair_img = document.getElementById('fair4');
var fair_para = document.getElementById('para4');
fair_img.style.display = 'block';
fair_para.style.display = 'block';

}

</script>

</head>
<body>
<div id="fair-model">
        
        <div id="target1" class="target" onmouseover="show_F()">&nbsp;</div>
        <div id="target2" class="target" onmouseover="show_A()">&nbsp;</div>
        <div id="target3" class="target" onmouseover="show_I()">&nbsp;</div>
        <div id="target4" class="target" onmouseover="show_R()">&nbsp;</div>
        
        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over1.jpg" id="fair1" />
        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over2.jpg" id="fair2" />

        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over3.jpg" id="fair3" />
        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over4.jpg" id="fair4" />
        
        <p id="para1">Morbi vitae erat nec ipsum mattis ullamcorper nec quis neque. Proin elementum vehicula massa nec interdum. Sed in felis purus, sit 

amet viverra metus. </p>
        <p id="para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus arcu, dapibus ullamcorper tincidunt ac, tempus sed velit. 

Donec lacinia fringilla dolor eu convallis. Donec ac aliquam leo.</p>
        <p id="para3">Morbi vitae erat nec ipsum mattis ullamcorper nec quis neque. Proin elementum vehicula massa nec interdum. Sed in felis purus, sit 

amet viverra metus. </p>
        <p id="para4">Morbi imperdiet, urna sed hendrerit molestie, lorem erat ultricies enim, ut cursus nunc sem quis urna. Praesent quis mi et enim 

imperdiet porttitor sed vitae ipsum. Suspendisse potenti. Mauris quis elit lacus. Ut pretium posuere nulla eu gravida. Lorem ipsum dolor sit amet, 

consectetur adipiscing elit. </p>
        </div>

</body>
</html>

Any suggestions would be welcome.

Cheers,

Chris :slight_smile:

2

If I’m not mistaken IE requires the attribute to have the correct case (onMouseOver instead of onmouseover).
That should fix it but I recommend first of all to use jQuery, makes your life a lot easier even with simple stuff such as this, and you shouldn’t be using this method to assign events either way.

Once you’re using jQuery you could do something much easier such as:

$('.button').mouseover(function(){
    $('#image').show();
    $('#other_image').hide();
});
3

Thank you so much ^^

4

Hi Kokos,

Thanks for your response. I changed the event to onMouseOver with caps, but that didn’t make any difference for IE. So I decided to go down the jQuery route as you suggested. I agree it makes life easier.

Again works fine in Firefox butunfortunately it still doesn’t work in IE!

I now have:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<style type="text/css"> 
 
#fair-model {
width: 533px;
height: 400px;
padding-bottom: 30px;
background-image: url(http://i1195.photobucket.com/albums/aa391/chris_ne/fair-bg.jpg);
background-repeat: no-repeat;
position: relative;
}
 
.target {
height: 55px;
width: 127px;
position: absolute;
z-index: 10000000;
}
 
#target1 {
top: 15px;
left: 93px;
}
 
#target2 {
top: 91px;
left: 14px;
}
 
#target3 {
top: 91px;
left: 172px;
}
 
#target4 {
top: 176px;
left: 93px;
}
 
#fair-model img {
display: none;
position: absolute;
padding:0;
margin:0;
border:none;
}
 
#fair-model p {
display: none;
position: absolute;
top: 250px;
color: #000000;
font-size: 12px;
font-weight: bold;
width: 288px;
padding: 15px;
}
 
</style>
 
<script type="text/javascript"> 
 
 
$(document).ready(function(){
 
  function hide_all() {
 
  $("#fair1").hide();
  $("#fair2").hide();
  $("#fair3").hide();
  $("#fair4").hide();
  $("#para1").hide();
  $("#para2").hide();
  $("#para3").hide();
  $("#para4").hide();
  }
 
  hide_all();
 
 
  $("#target1").mouseover(function(){
  hide_all();
  $("#fair1").show();
  $("#para1").show();
  });
 
  $("#target2").mouseover(function(){
  hide_all();
  $("#fair2").show();
  $("#para2").show();
  });
 
  $("#target3").mouseover(function(){
  hide_all();
  $("#fair3").show();
  $("#para3").show();
  });
 
  $("#target4").mouseover(function(){
  hide_all();
  $("#fair4").show();
  $("#para4").show();
  });
 
});
 
 
</script>
 
</head>
<body>
<div id="fair-model">
        
        <div id="target1" class="target">&nbsp;</div>
        <div id="target2" class="target">&nbsp;</div>
        <div id="target3" class="target">&nbsp;</div>
        <div id="target4" class="target">&nbsp;</div>
        
        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over1.jpg" id="fair1" />
        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over2.jpg" id="fair2" />
 
        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over3.jpg" id="fair3" />
        <img src="http://i1195.photobucket.com/albums/aa391/chris_ne/fair-over4.jpg" id="fair4" />
        
        <p id="para1">Morbi vitae erat nec ipsum mattis ullamcorper nec quis neque. Proin elementum vehicula massa nec interdum. Sed in felis purus, sit amet viverra metus. </p>
        <p id="para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus arcu, dapibus ullamcorper tincidunt ac, tempus sed velit. Donec lacinia fringilla dolor eu convallis. Donec ac aliquam leo.</p>
        <p id="para3">Morbi vitae erat nec ipsum mattis ullamcorper nec quis neque. Proin elementum vehicula massa nec interdum. Sed in felis purus, sit amet viverra metus. </p>
        <p id="para4">Morbi imperdiet, urna sed hendrerit molestie, lorem erat ultricies enim, ut cursus nunc sem quis urna. Praesent quis mi et enim imperdiet porttitor sed vitae ipsum. Suspendisse potenti. Mauris quis elit lacus. Ut pretium posuere nulla eu gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        </div>
 
</body>
</html>

Sometimes it changes the image but only after a long delay.

5

You are mistaken; the correct case for event handler names is all lowercase.

There is nothing wrong with the operation of the script. The problem is that the display of the images is overlaying the hovered areas, despite their higher z-index. This is preventing any further mouseover events.
I would have said that I.E. is actually responding correctly in this case.