asked on

jQuery mapster and tooltip

I have the following jQuery script that displays a tooltip over a map area on hover. I would like to display different classes depending upon the area that is hovered.

How do I change the class here in the jQuey;

<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>

Open in new window

hielo

Try adding ans onMouseOver option. The documentation states:

This callback allows you to dynamically provide a boundList based on summary data from the imagemap itself, rather than providing the list up front. The event passes an array of AreaData objects, of the following structure:

{
key: 'key', // primary mapKey for this area or area group
value: 'value', // mapValue for this area or group
options = {} // area-specific options defined for this group.
areas = [] // array of areas that make up this group
}
http://www.outsharked.com/imagemapster/default.aspx?docs.html#onmouseout

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:

<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"],
            onMouseOver:function( obj ){
                   if( obj.value == 'somevalue' )
                   {
                     $(this).addClass("name of class");
                   }
             },
            areas: [{
        		key: "oklahoma",
        		toolTip: oklahoma
        	},
        	{
        		key: "bakken",
        		toolTip: bakken
        	},
        	{
        		key: "niobara",
        		toolTip: niobara
        	},
        	{
        		key: "permian",
        		toolTip: permian
        	},
        	{
        		key: "eagleford",
        		toolTip: eagleford
        	}
        	
        	]
        })
});
</script>

</script>

Open in new window

Robert Granlund

ASKER

Do you think this will work if I want to add a class to the tooltip container?

<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>

Open in new window

hielo

You mean instead of $(this).addClass("oklahoma_class");?

You could try targetting :
$('.map-bubble').addClass("oklahoma_class");

but, at the time $('.map-bubble').addClass("oklahoma_class");, the element with <div class='map-bubble'/> needs to exist already. If you post a demo page somewhere I'll be able to assess your problem.

Regards,
Hielo

Robert Granlund

ASKER

The class is already included in the script when it creates the tooltip container.

<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>

Open in new window

Here is the link: http://www.energyreco.com/mapping/
I want to be able to create a class for each tooltip so the bubble appears in different places on the page.

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Granlund

ASKER

The errors are fixed. Here is the link: http://www.energyreco.com/mapping/
I want to be able to create a class for each tooltip so the bubble appears in different places on the page.

<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>

Open in new window

I want to add a class to: toolTipContainer: '<div class="map-bubble"> </div>',