Having issues with inverting image colors on IE and Safari. I'm working on a navigation feature where images change color when clicked or hovered over, but this functionality isn't working on IE and Safari.
A function issue
{
$('.pressed').removeClass('pressed');
$('#'+imgid)
.toggleClass('pressed')
.css('z-index',2);
}
function toggleVisible() {
if (document.getElementById('mapButtons')) {
if (document.getElementById('mapButtons').style.display == 'none') {
document.getElementById('mapButtons').style.display = 'block';
document.getElementById('modelButtons').style.display = 'none';
}
else {
document.getElementById('mapButtons').style.display = 'none';
document.getElementById('modelButtons').style.display = 'block';
}
}
}
function flipImage() {
$('.side').toggleClass('rotated');
}
$(function() {
$('area').mouseover(function() {
var imgid=$(this).data('imgid');
$('#demo').text("Mouseover for "+imgid);
$('#'+imgid)
.toggleClass('invert',true)
.css('z-index',2);
}).mouseout(function() {
var imgid=$(this).data('imgid');
$('#mi').text("Mouseout for "+imgid);
$('#'+imgid)
.toggleClass('invert',false)
.css('z-index',1);
}).click(function() {
var imgid=$(this).data('imgid');
$('#demo').text("click for "+imgid);
$('.pressed').removeClass('pressed');
$('#'+imgid)
.toggleClass('pressed')
.css('z-index',2);
});
});