imagemapster caption/tooltip

Posted on 2013-11-09
Last Modified: 2013-11-09
Hello experts,

I am trying to set a tooltip with imagemapster plugin.

They have a very complicated example here:

What i am trying to do is much more simple. the tooltip should basically show a text of the area shape id. So in this example below it should simply show "5.5.1". The tooltip should show inside the area shape when hover.

If someone can just show me a very simply way to do i would be thankful.

<area shape="rect" id="5.5.1" coords="35,47,164,78" alt="" href="" target="_blank">

Open in new window

Question by:Refael
  • 4
  • 4
LVL 58

Expert Comment

ID: 39635897

<div style="clear: both; width: 500px; height: 50px; border: 1px solid black;" id="selections"></div>
<img id="vegetables" src="" usemap="#veg">
<map id="veg_map" name="veg">
<area shape="rect" name="myshape"  coords="35,47,164,78"  href="#"> 

Open in new window

    var image = $('#vegetables');
        fillOpacity: 0.4,
        fillColor: "d42e16",
        stroke: true,
        strokeColor: "3320FF",
        strokeOpacity: 0.8,
        strokeWidth: 4,
        singleSelect: true,
        mapKey: 'name',
        listKey: 'name'

Open in new window


Author Comment

ID: 39635913
Hi GaryC123

Thank you.

The jsfiddle does not work for some reason!?

The tooltip/caption should show in the highlighted area shape  and not in a div outside.
The tooltip/caption text should be simply the ID of the area shape.
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39635998
just overwrite this function:
        onShowToolTip: function(data) {

Open in new window


Note: I set both tooltips on the area as well as only some IDs.

LVL 58

Expert Comment

ID: 39636000
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

LVL 58

Expert Comment

ID: 39636012
If I am understanding it he wants the tooltip within the actual area mapping coordinates
And an updated version

Author Comment

ID: 39636037
GaryC123 Thank you. It seem to work :-)

i am trying to center the text in the area so i am adding 50% from left but it does not seem to work.
LVL 58

Accepted Solution

Gary earned 500 total points
ID: 39636056

Author Comment

ID: 39636143
Hi GaryC123

Thank you so much.
Because this should have been triggered when the user hover a row in a table i managed to convert it as show below. It works perfect!

var areaMapId = "area#"+newText;		
	var areaMapPosition = $(areaMapId).attr('coords').split(',');

Open in new window


Author Closing Comment

ID: 39636145
GaryC123 Thank you so much!!

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question ( on how to make a page show some balloons animate up a page…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now