asked on

imagemapster caption/tooltip

Hello experts,

I am trying to set a tooltip with imagemapster plugin.

They have a very complicated example here: http://www.outsharked.com/imagemapster/default.aspx?demos.html#tooltip.

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

Gary

http://jsfiddle.net/GaryC123/sb9j7/3365/

HTML

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

Open in new window

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

Open in new window

Refael

ASKER

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.

Rainer Jeschor

Hi,
just overwrite this function:

        onShowToolTip: function(data) {
            data.toolTip.text(this.id);
        }

Open in new window

Sample:
http://jsfiddle.net/EE_RainerJ/5scbh/

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

HTH
Rainer

Gary

So like this
http://jsfiddle.net/GaryC123/sb9j7/3369/

Gary

If I am understanding it he wants the tooltip within the actual area mapping coordinates
And an updated version
http://jsfiddle.net/GaryC123/sb9j7/3371/

Refael

ASKER

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.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

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

Start Free Trial

Refael

ASKER

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(',');
		$("#tooltip").css({top:areaMapPosition[1]+"px",left:areaMapPosition[0]+"px"}).html(text).width(areaMapPosition[2]-areaMapPosition[0]+"px").show();

Open in new window

Refael

ASKER

GaryC123 Thank you so much!!