jQuery mapster and tooltip

Robert Granlund
Robert Granlund used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
hielo
Expert of the Year 2008
Top Expert 2008

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

Author

Commented:
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
Expert of the Year 2008
Top Expert 2008

Commented:
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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
Robert Granlund

Author

Commented:
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.
Expert of the Year 2008
Top Expert 2008
Commented:
That page contains errors.  Execution of javascript halts upon errors, so you won't be able to troubleshoot your problems until you have fixed all the run-time errors first.  Open Firefox, install the "Web Developer" toolbar.  Load your page, then to the far right-side of the toolbar you will see some red icons.  Click the right-most one and a window will pop up telling which file and line contains the errors.  Fix those errors, then post back if you still need assistance.
Robert Granlund

Author

Commented:
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>',

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial