jQuery “hover” function is not working in FireFox over <area> tags
Question
Explanation of my code:
I have 3 images that are constantly scrolling left. When an image gets too far left, it gets placed all the way to the right again, creating a nice transition effect.
The images are mapped using tags, and when you mouse over an image, the scrolling stops, and a popover shows up over the specific area of the image.
In Chrome and Safari this works, but in FireFox, the hover function does not register for the tags. What should I do?
Here is my code:
var custom_style = 'night'; // set this to day or night, and then set_style to "true" to activate it
var set_style = true; // When this is false, it uses your computer's time
var speed = 2; // number of pixels moved left every 50 milliseconds
paused = false;
area = null;
$(document).ready(function() {
var date = new Date();
var style = "day"
if (date.getHours() >= 17 || date.getHours() <= 5 || (set_style && custom_style == 'night')){
style="night";
$('#day_sign2').hide();
$('#night_sign').show();
$('.customarea').addClass('customareaNight');
}else{
$('#container').css( 'backgroundImage', '0 !important' );
$('#container').addClass('night_container');
}
setInterval(wells_fancy_slider, 50);
$('area').css('z-index', '5000');
t = null;
$('area').hover(function() { // this is not registering in FF
$('.customarea').hide();
paused = true;
area = $(this).attr('id');
$('.custom' + area).show();
alert(area);
console.log('.custom' + area);
t = setTimeout(custom_mouseover, 5000);
}, function() {
setTimeout(function() {
$('.customarea').hide();
paused = false;
}, 2500)
});
if (style == 'day'){
$('#container').css('background-color', 'white');
$('.night').hide();
}else{
$('.day').hide();
}
})
function custom_mouseover() {
clearInterval(t)
}
function wells_fancy_slider() {
if (!paused) {
if (parseInt($('.pic1').css('left')) < -2770) {
$('.pic1').css('left', '5586');
}
if (parseInt($('.pic2').css('left')) < -2770) {
$('.pic2').css('left', '5586');
}
if (parseInt($('.pic3').css('left')) < -2770) {
$('.pic3').css('left', '5586');
}
$('.pic1, .pic2, .pic3').css('left', '-=' + speed);
}
}
And the HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="wells_slider.css">
<script type="text/javascript" src="wells_slider.js"></script>
</head>
<body>
<div style="position:absolute; width: 15%; z-index: 2000; float: left; height: 100%; left:0px; background-color:black;"></div>
<div style="position:absolute; width: 15%; z-index: 2000; float: right; height: 100%; right:0px; background-color:black;"></div>
<div id="container">
<div style="width: 100%;margin-left: auto;margin-right: auto;position: relative;height: 50px;">
<img id="day_sign" src="img/day_sign.png" />
<img id="day_sign2" src="img/day_sign2.png" />
<img id="night_sign" src="img/night_sign.png" style="display:none;" />
</div>
<div id="pic_container">
<img class="pic1 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic2 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic3 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic1 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic2 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic3 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<map id="img_map" name="img_map">
<area id="area1" shape="rect" coords="3,69,413,445" alt="1" title="1" />
<area id="area2" shape="rect" coords="413,73,692,443" alt="2" title="2" />
<area id="area3" shape="rect" coords="692,91,919,440" alt="3" title="3" />
<area id="area4" shape="rect" coords="917,102,1135,440" alt="4" title="4" />
<area id="area5" shape="rect" coords="1134,103,1363,441" alt="5" title="5" />
<area id="area6" shape="rect" coords="1360,107,1591,438" alt="6" title="6" />
<area id="area7" shape="rect" coords="1589,96,1872,438" alt="7" title="7" />
<area id="area8" shape="rect" coords="1871,100,2072,439" alt="8" title="8" />
<area id="area9" shape="rect" coords="2072,116,2272,436" alt="9" title="9" />
<area id="area10" shape="rect" coords="2270,70,2597,433" alt="10" title="10" />
<area id="area11" shape="rect" coords="2595,78,2784,430" alt="11" title="11" />
</map>
<div class="p_container popup_container1 pic1">
<a href="http://www.wellsjohnston.com"><div class="customarea customarea1" >
Some Text
</div></a>
<div class="customarea customarea2" style="left:400px;">
Some Text
</div>
<div class="customarea customarea3" style="left:690px;">
Some Text
</div>
<div class="customarea customarea4" style="left:912px;">
Some Text
</div>
<div class="customarea customarea5" style="left:1132px;">
Some Text
</div>
<div class="customarea customarea6" style="left:1357px;">
Some Text
</div>
<div class="customarea customarea7" style="left:1585px;">
Some Text
</div>
<div class="customarea customarea8" style="left:1870px;">
Some Text
</div>
<div class="customarea customarea9" style="left:2070px;">
Some Text
</div>
<div class="customarea customarea10" style="left:2265px;">
Some Text
</div>
<div class="customarea customarea11" style="left:2595px;">
Some Text
</div>
</div>
<div class="p_container popup_container2 pic2">
<div class="customarea customarea1" >
Some Text
</div>
<div class="customarea customarea2" style="left:400px;">
Some Text
</div>
<div class="customarea customarea3" style="left:690px;">
Some Text
</div>
<div class="customarea customarea4" style="left:917px;">
Some Text
</div>
<div class="customarea customarea5" style="left:1132px;">
Some Text
</div>
<div class="customarea customarea6" style="left:1357px;">
Some Text
</div>
<div class="customarea customarea7" style="left:1585px;">
Some Text
</div>
<div class="customarea customarea8" style="left:1870px;">
Some Text
</div>
<div class="customarea customarea9" style="left:2070px;">
Some Text
</div>
<div class="customarea customarea10" style="left:2265px;">
Some Text
</div>
<div class="customarea customarea11" style="left:2595px;">
Some Text
</div>
</div>
<div class="p_container popup_container3 pic3">
<div class="customarea customarea1" >
Some Text
</div>
<div class="customarea customarea2" style="left:400px;">
Some Text
</div>
<div class="customarea customarea3" style="left:690px;">
Some Text
</div>
<div class="customarea customarea4" style="left:917px;">
Some Text
</div>
<div class="customarea customarea5" style="left:1132px;">
Some Text
</div>
<div class="customarea customarea6" style="left:1357px;">
Some Text
</div>
<div class="customarea customarea7" style="left:1585px;">
Some Text
</div>
<div class="customarea customarea8" style="left:1870px;">
Some Text
</div>
<div class="customarea customarea9" style="left:2070px;">
Some Text
</div>
<div class="customarea customarea10" style="left:2265px;">
Some Text
</div>
<div class="customarea customarea11" style="left:2595px;">
Some Text
</div>
</div>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2012-11-22 23:23:19
I think I've figured it out.
On your image tags you need to place a hash tag before the map name.
<img class="pic1 day" src="img/LMday.png" usemap="#img_map" border="0" width="2798" height="450" alt="" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
I can't get jQuery hover events to trigger in FireFox over <area> tags
jquery hover function onLoad not working in firefox
Image Map Hover Over Area with ImageMapster jQuery not working
jquery hover not working in firefox
Jquery Hover not working in Firefox or IE
Firefox/IE jQuery is(“:hover”) not working
jQuery hover over not working properly
jquery hover over image not working
Jquery hover function not working
jQuery function not working in Firefox
Related Tags