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

LVL 7
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

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

0
hieloCommented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Download your Guide
rgranlundAuthor 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.
0
hieloCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rgranlundAuthor 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>',
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.