<script>
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma = 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
fill: true,
fillColor: 'ffffff',
fillColorMask: 'FFFFFF',
fillOpacity: 0,
strokeOpacity: 1,
strokeWidth: 1,
isSelectable: false,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
toolTipContainer: '<div class="map-bubble map-bubble-font"> </div>',
showToolTip: true,
toolTipClose: ["area-mouseout"],
areas: [{
key: "oklahoma",
toolTip: oklahoma
},
{
key: "bakken",
toolTip: bakken
},
{
key: "niobara",
toolTip: niobara
},
{
key: "permian",
toolTip: permian
},
{
key: "eagleford",
toolTip: eagleford
}
]
})
});
</script>
</script>
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma = 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
fill: true,
fillColor: 'ffffff',
fillColorMask: 'FFFFFF',
fillOpacity: 0,
strokeOpacity: 1,
strokeWidth: 1,
isSelectable: false,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
toolTipContainer: '<div class="map-bubble // ADD CLASS HERE //"> </div>',
showToolTip: true,
toolTipClose: ["area-mouseout"],
onMouseOver:function( obj ){
if( obj.value == 'oklahoma' )
{
$(this).addClass("oklahoma_class");
}
},
areas: [{
key: "oklahoma",
toolTip: oklahoma
},
{
key: "bakken",
toolTip: bakken
},
{
key: "niobara",
toolTip: niobara
},
{
key: "permian",
toolTip: permian
},
{
key: "eagleford",
toolTip: eagleford
}
]
})
});
</script>
<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma= 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
fill: true,
fillColor: 'ffffff',
fillColorMask: 'FFFFFF',
fillOpacity: 0,
strokeOpacity: 1,
strokeWidth: 1,
isSelectable: false,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
showToolTip: true,
toolTipContainer: '<div class="map-bubble"> </div>',
toolTipClose: ["area-mouseout"],
onMouseOver:function( obj ){
if( obj.value == 'oklahoma' )
{
$('.map-bubble').addClass("oklahoma");
}
},
areas: [{
key: "oklahoma",
toolTip: oklahoma
},
{
key: "bakken",
toolTip: bakken
},
{
key: "niobara",
toolTip: niobara
},
{
key: "permian",
toolTip: permian
},
{
key: "eagleford",
toolTip: eagleford
}]
})
});
</script>
Here is the link: http://www.energyreco.com/mapping/<script type='text/javascript'>
$(window).load(function(){
var image = $('#mapping');
var oklahoma= 'Oklahoma';
var bakken = 'Bakken';
var niobara = 'Niobara';
var permian = 'Permian';
var eagleford = 'Eagle Ford';
$('img').mapster({
fill: true,
fillColor: 'ffffff',
fillColorMask: 'FFFFFF',
fillOpacity: 0,
strokeOpacity: 1,
strokeWidth: 1,
isSelectable: false,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
showToolTip: true,
toolTipContainer: '<div class="map-bubble"> </div>',
toolTipClose: ["area-mouseout"],
onMouseOver:function( obj ){
if( obj.value == 'oklahoma' )
{
$('.map-bubble').addClass("oklahoma");
}
},
areas: [{
key: "oklahoma",
toolTip: oklahoma
},
{
key: "bakken",
toolTip: bakken
},
{
key: "niobara",
toolTip: niobara
},
{
key: "permian",
toolTip: permian
},
{
key: "eagleford",
toolTip: eagleford
}]
})
});
</script>
I want to add a class to: toolTipContainer: '<div class="map-bubble"> </div>',
So try something similar to the code below. You'll need to "inspect" obj to see what key, value, options, and/or areas you want to respond to:
Open in new window