Solved

imagemapster caption/tooltip

Posted on 2013-11-09
9
2,475 Views
Last Modified: 2013-11-09
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

0
Comment
Question by:Refael
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39635897
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

JS
    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

0
 

Author Comment

by:Refael
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.
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39635998
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
0
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

 
LVL 58

Expert Comment

by:Gary
ID: 39636000
0
 
LVL 58

Expert Comment

by:Gary
ID: 39636012
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/
0
 

Author Comment

by:Refael
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39636056
0
 

Author Comment

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

Open in new window

0
 

Author Closing Comment

by:Refael
ID: 39636145
GaryC123 Thank you so much!!
0

Featured Post

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

690 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