Wow, thank you so much for all your help. This map was for a project I needed to get done by end of day today. After hours of looking into html image mappers and the above, I just did the most obvious:
My map has four regions: west, midwest, southeast, and northeast. I manipulated the coordinates to get it this way. Overall the plugin works, the only part that wasn’t working is keeping the hover color when it was clicked. I only have four regions, so what was the easiest thing to do???
Create five maps for IE8 and below, and leave the single map for everything else.
For IE8, I created a map for the default view and another four maps with the ‘selected’ region filled to the hover color.
The default map is displayed first and the other maps are display:none; On click, ONLY FOR IE8 AND BELOW, the map will hide the current view, and display the map with the section color filled to the hover color. To the user, the experience is the same as the regular map, except in reality it’s five maps which are hidden and shown depending on click. I know, I know, it’s sloppy and redundant code, but I was low on time and just needed it to work. Here’s the code:
$(document).ready(function() {
$('#map').usmap({
showLabels: false,
'stateSpecificHoverStyles': {
'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
},
'stateSpecificStyles': {
'WEST' : {fill: '#1D5E75',
stroke:'#ffffff'},
'SOUTHEAST' : {fill: '#006B3B',
stroke:'#ffffff'},
'MIDWEST' : {fill: '#A49A00',
stroke:'#ffffff'},
'NORTHEAST' : {fill: '#DCA728',
stroke:'#ffffff'}
},
'mouseoverState': {
'HI' : function(event, data) {
//return false;
}
},
'clickState': {
'SOUTHEAST' : function(event, data) {
$(".accordion").accordion({active:2});
$("#map > svg > path").each(function(){
$(this).css('fill', '');
});
$('#' + data.name).css('fill', '#e1ebe5');
$("#southeastpanel").toggleClass("openmapui");
},
'NORTHEAST' : function(event, data) {
$(".accordion").accordion({active:3});
$("#map > svg > path").each(function(){
$(this).css('fill', '');
});
$('#' + data.name).css('fill', '#EDDEBD');
$("#northeastpanel").toggleClass("openmapui");
},
'MIDWEST' : function(event, data) {
$(".accordion").accordion({active:1});
$("#map > svg > path").each(function(){
$(this).css('fill', '');
});
$('#' + data.name).css('fill', '#edebcc');
$("#midwestpanel").toggleClass("openmapui");
},
'WEST' : function(event, data) {
$(".accordion").accordion({active:0});
$("#map > svg > path").each(function(){
$(this).css('fill', '');
});
$('#' + data.name).css('fill', '#e1ebf4');
$("#westpanel").toggleClass("openmapui");
}
},
'click' : function(event, data) {
$('#alert')
.text('Click '+data.name+' on map 1')
.stop()
.css('backgroundColor', '#ff0')
.animate({backgroundColor: '#ddd'}, 1000);
}
});
$('#mapie').usmap({
showLabels: false,
'stateSpecificHoverStyles': {
'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
},
'stateSpecificStyles': {
'WEST' : {fill: '#1D5E75',
stroke:'#ffffff'},
'SOUTHEAST' : {fill: '#006B3B',
stroke:'#ffffff'},
'MIDWEST' : {fill: '#A49A00',
stroke:'#ffffff'},
'NORTHEAST' : {fill: '#DCA728',
stroke:'#ffffff'}
},
'mouseoverState': {
'HI' : function(event, data) {
//return false;
}
},
'clickState': {
'SOUTHEAST' : function(event, data) {
$(".accordion").accordion({active:2});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiese').show();
},
'NORTHEAST' : function(event, data) {
$(".accordion").accordion({active:3});
$('#mapie').hide();
$('#mapiese').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiene').show();
},
'MIDWEST' : function(event, data) {
$(".accordion").accordion({active:1});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiese').hide();
$('#mapiemw').show();
},
'WEST' : function(event, data) {
$(".accordion").accordion({active:0});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiese').hide();
$('#mapiemw').hide();
$('#mapiewest').show();
}
},
'click' : function(event, data) {
$('#alert')
.text('Click '+data.name+' on map 1')
.stop()
.css('backgroundColor', '#ff0')
.animate({backgroundColor: '#ddd'}, 1000);
}
});
$('#mapiewest').usmap({
showLabels: false,
'stateSpecificHoverStyles': {
'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
},
'stateSpecificStyles': {
'WEST' : {fill: '#e1ebf4',
stroke:'#ffffff'},
'SOUTHEAST' : {fill: '#006B3B',
stroke:'#ffffff'},
'MIDWEST' : {fill: '#A49A00',
stroke:'#ffffff'},
'NORTHEAST' : {fill: '#DCA728',
stroke:'#ffffff'}
},
'mouseoverState': {
'HI' : function(event, data) {
//return false;
}
},
'clickState': {
'SOUTHEAST' : function(event, data) {
$(".accordion").accordion({active:2});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiese').show();
},
'NORTHEAST' : function(event, data) {
$(".accordion").accordion({active:3});
$('#mapie').hide();
$('#mapiese').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiene').show();
},
'MIDWEST' : function(event, data) {
$(".accordion").accordion({active:1});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiese').hide();
$('#mapiemw').show();
},
'WEST' : function(event, data) {
$(".accordion").accordion({active:0});
}
},
'click' : function(event, data) {
$('#alert')
.text('Click '+data.name+' on map 1')
.stop()
.css('backgroundColor', '#ff0')
.animate({backgroundColor: '#ddd'}, 1000);
}
});
$('#mapiese').usmap({
showLabels: false,
'stateSpecificHoverStyles': {
'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
},
'stateSpecificStyles': {
'WEST' : {fill: '#1D5E75',
stroke:'#ffffff'},
'SOUTHEAST' : {fill: '#e1ebe5',
stroke:'#ffffff'},
'MIDWEST' : {fill: '#A49A00',
stroke:'#ffffff'},
'NORTHEAST' : {fill: '#DCA728',
stroke:'#ffffff'}
},
'mouseoverState': {
'HI' : function(event, data) {
//return false;
}
},
'clickState': {
'SOUTHEAST' : function(event, data) {
$(".accordion").accordion({active:2});
},
'NORTHEAST' : function(event, data) {
$(".accordion").accordion({active:3});
$('#mapie').hide();
$('#mapiese').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiene').show();
},
'MIDWEST' : function(event, data) {
$(".accordion").accordion({active:1});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiese').hide();
$('#mapiemw').show();
},
'WEST' : function(event, data) {
$(".accordion").accordion({active:0});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiese').hide();
$('#mapiemw').hide();
$('#mapiewest').show();
}
},
'click' : function(event, data) {
$('#alert')
.text('Click '+data.name+' on map 1')
.stop()
.css('backgroundColor', '#ff0')
.animate({backgroundColor: '#ddd'}, 1000);
}
});
$('#mapiemw').usmap({
showLabels: false,
'stateSpecificHoverStyles': {
'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
},
'stateSpecificStyles': {
'WEST' : {fill: '#1D5E75',
stroke:'#ffffff'},
'SOUTHEAST' : {fill: '#006B3B',
stroke:'#ffffff'},
'MIDWEST' : {fill: '#edebcc',
stroke:'#ffffff'},
'NORTHEAST' : {fill: '#DCA728',
stroke:'#ffffff'}
},
'mouseoverState': {
'HI' : function(event, data) {
//return false;
}
},
'clickState': {
'SOUTHEAST' : function(event, data) {
$(".accordion").accordion({active:2});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiese').show();
},
'NORTHEAST' : function(event, data) {
$(".accordion").accordion({active:3});
$('#mapie').hide();
$('#mapiese').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiene').show();
},
'MIDWEST' : function(event, data) {
$(".accordion").accordion({active:1});
},
'WEST' : function(event, data) {
$(".accordion").accordion({active:0});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiese').hide();
$('#mapiemw').hide();
$('#mapiewest').show();
}
},
'click' : function(event, data) {
$('#alert')
.text('Click '+data.name+' on map 1')
.stop()
.css('backgroundColor', '#ff0')
.animate({backgroundColor: '#ddd'}, 1000);
}
});
$('#mapiene').usmap({
showLabels: false,
'stateSpecificHoverStyles': {
'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
},
'stateSpecificStyles': {
'WEST' : {fill: '#1D5E75',
stroke:'#ffffff'},
'SOUTHEAST' : {fill: '#006B3B',
stroke:'#ffffff'},
'MIDWEST' : {fill: '#A49A00',
stroke:'#ffffff'},
'NORTHEAST' : {fill: '#EDDEBD',
stroke:'#ffffff'}
},
'mouseoverState': {
'HI' : function(event, data) {
//return false;
}
},
'clickState': {
'SOUTHEAST' : function(event, data) {
$(".accordion").accordion({active:2});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiese').show();
},
'NORTHEAST' : function(event, data) {
$(".accordion").accordion({active:3});
},
'MIDWEST' : function(event, data) {
$(".accordion").accordion({active:1});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiese').hide();
$('#mapiemw').show();
},
'WEST' : function(event, data) {
$(".accordion").accordion({active:0});
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiese').hide();
$('#mapiemw').hide();
$('#mapiewest').show();
}
},
'click' : function(event, data) {
$('#alert')
.text('Click '+data.name+' on map 1')
.stop()
.css('backgroundColor', '#ff0')
.animate({backgroundColor: '#ddd'}, 1000);
}
});
});
Inline:
<!--[if lt IE 9]>
<div class="" id="mapie">
<div class="maptext">Click on a territory for contacts</div>
</div>
<div class="" id="mapiene" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>
<div class="" id="mapiewest" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>
<div class="" id="mapiese" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>
<div class="" id="mapiemw" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript">
$(function() {
$('#map').hide();
var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" };
$( "#accordion" ).accordion({ icons: icons, header:"h3", active:3, collapsible:true, });
$( "#toggle" ).button().click(function() { if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null ); } else {
$( "#accordion" ).accordion( "option", "icons", icons ); } });
$("#southeastpanel").click(function() { if(!$('#southeastpanel').hasClass("ui-state-active")){ } else{
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiese').show();
} });
$("#northeastpanel").click(function() { if(!$('#northeastpanel').hasClass("ui-state-active")){ } else{
$('#mapie').hide();
$('#mapiese').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();
$('#mapiene').show();
} });
$("#westpanel").click(function() { if(!$('#westpanel').hasClass("ui-state-active")){ } else{
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiese').hide();
$('#mapiemw').hide();
$('#mapiewest').show();
} });
$("#midwestpanel").click(function() { if(!$('#midwestpanel').hasClass("ui-state-active")){ } else{
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiese').hide();
$('#mapiemw').show();
} }); });
</script>
<![endif]-->
Oh and by the way, my map is connected to a jquery ui accordion. When the map is clicked, each corresponding accordion for each region is activated.
IE8 I HATE YOU!!!