Solved

jQuery Imagemapster

Posted on 2013-11-07
16
1,302 Views
Last Modified: 2013-11-07
Hello Experts,

I am using the imagemapster jQuery plugin.

I have the same example and code as shown here:
http://www.outsharked.com/imagemapster/default.aspx?demos.html#usa
You can click the "Show code" to see how it works.

My questions is:

I would like to trigger the "highlight" of the imagemapster when a user mouse-over a row in a table. Currently the user have to mouse-over the image/map for the "highlight" function to trigger.

I can set an ID for each row and match it to the ID of each "area" in the map see example below. All I want to know is how can i bind the function to the table row.

Any help would be very much appreciated!!!

<area shape="rect" id="20" coords="43,48,206,83"> // ID for the map area
<tr id="20"><td>text</td></tr>  /ID for the row in the table

Open in new window


Here is my current code:

$('#map').mapster({
	mapKey: 'id',
	fillOpacity: 0.8,
        fillColor: "000000",
        stroke: true,
        strokeColor: "3320FF",
        strokeWidth: 2,
        singleSelect: true,		 
    	
	render_highlight: {
        fillColor: '000000',
        stroke: true,
        altImage: 'layout/ansichten/haus2-sud.png'
        },    		
        fadeInterval: 50	    
	});

Open in new window

0
Comment
Question by:Refael
  • 8
  • 8
16 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
Hi mate,
from this example you can see the same behavior you want but done with checkboxes.

From what can see in the code (line 244 of the source code of the above page) the highlight is done by calling:
$usamap.mapster('highlight', true, key);

Open in new window

where $usamap = $('#usa_image'); and key is the area key...

Applying this in a table is just a matter of handling the mouseenter and mouseleave events on the <tr>:
$('#tableid tr').on('mouseenter', function() {
// make sure you have a column with the map key
var mapKeyColumnIndex = 0;
var $row = $(this);
var key = $row.find('td')[mapKeyColumnIndex].html();

$usamap.mapster('highlight', true, key);
})

Open in new window

Do the same for the mounseleave but with: $usamap.mapster('highlight', false, key);

I couldn't test this properly but you should be able to go from here.
0
 

Author Comment

by:Refael
Comment Utility
Hi Alex,

I am trying to follow you but its a bit complicated. You wrote "make sure you have a column with the map key"... do you mean that the TR have an id or the TD and should the id by "map" or "id". I am sorry its not easy :-(
0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
My idea was to have a column in the table, hidden, that we could refer to as a link between the row and the actual area in the map. So it's not an attribute in the row or column, is actually a value there.
Although if you want to implement it as a custom attribute in your table you can, it's really just a matter of how you want to make the link between each row and the are in the map.

Do you have a public url where I can see your table?
Or you can post your table HTML here if you want.
0
 

Author Comment

by:Refael
Comment Utility
Hi AlexCode

I can add a hidden column to the table via jQuery or add an ID to each row TR. Currently the each TD have an ID that can be used. This table is being generated from a database and that's why i am not able to change its HTML directly.

I would be happy if you can just show me a quick example that works and i will try to take it from there fitting it to my table and page code.

Many thank you's.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
The main idea is in the code I added above.

On that code I'm getting the map key from a column value:
var key = $row.find('td')[mapKeyColumnIndex].html();

I still don't understand how the your <td> id's can relate to the map areas...

Each map area has a key (like an id), that is the thing that makes it possible to interact with it.
As long as per table row you know to which area on the map it relates then it's easy to adapt my code.
0
 

Author Comment

by:Refael
Comment Utility
Hi AlexCode,

Thank you for your help.

Here is a slice of code from the table to explain my code better.

Each map area shape has an ID:

<area shape="rect" id="0.6.1" coords="43,48,206,83"> // ID for the map area

In the table the first column TD value is the same value as the ID area shape value e.g. "0.6.1"

<table class="model_table">
  <tbody>
    <tr>
      <td>model</td>
      <td>color</td>
      <td>article</td>
    </tr>
    <tr>
      <td>0.6.1</td>
      <td>blue</td>
      <td>200</td>
    </tr>
  </tbody>
</table>

Does this explain better?
0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
Ok, so I went to that sample code again: http://www.outsharked.com/imagemapster/examples/usa.html

If you inspect this page code you see starting on line 171, the definition of the map.
Specially the property mapValue: 'data-full'

Aparently this represents where in each area on the map the key it's stored.
In fact, if you inspect an area you'll see a data-full='TX' for texas.

Still in the same example, if you use firebug to add a breakpoint in line 249:
$usamap.mapster('set', selected, $(this).attr('name'));

When you click Texas checkbox, $(this).attr('name') have 'TX'.

So, to select an area through code you need to call:
$usamap.mapster('set', selected, 'value on the defined mapValue property');
0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
How does your mapster configuration look like?
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:Refael
Comment Utility
Hello AlexCode

Here is the HTML and the current mapster configuration:

<div><img src="images/model.png" usemap="#Map" id="model"></div>

Open in new window


$('#model').mapster({
       mapKey: 'id',
	fillOpacity: 0.8,      
        singleSelect: true,
		 
    	 render_highlight: {
        	fillColor: '000000',
        	stroke: true,
        	altImage: 'images/model2.png'
    },    		
    fadeInterval: 50	
});

Open in new window

0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
Ok, looks good.

So if you call the following from a button click does it work?
$('#model').mapster('set', selected, '0.6.1');

Open in new window

It should select the area with id="0.6.1"
0
 

Author Comment

by:Refael
Comment Utility
I am getting an error "ReferenceError: selected is not defined" ? I tried it just by doing the following:

$('table tr').on('mouseenter', function() {
     $('#model').mapster('set', selected, '0.6.1');
  };
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
Comment Utility
sorry, selected is a boolean value
$('table tr').on('mouseenter', function() {
     $('#model').mapster('set', true, '0.6.1');
  }; 

Open in new window

0
 

Author Comment

by:Refael
Comment Utility
Yes this one works :-)
0
 

Author Comment

by:Refael
Comment Utility
So  i think i can now set the id as a var and set it on each loop for the tr and it should work fine, right?
0
 

Author Closing Comment

by:Refael
Comment Utility
AlexCode, thank you so much for investing the time to help me out.
Your last solution was what i was after! It works! I simply changed the '0.6.1' to the td.text  value and add it in an each loop. It works perfect! Thank you!!
0
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
Glad I could help! :)
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) 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 how to dynamically set the form action using jQuery.
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)

728 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

10 Experts available now in Live!

Get 1:1 Help Now