• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1762
  • Last Modified:

jQuery Imagemapster

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
Refael
Asked:
Refael
  • 8
  • 8
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
RefaelAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
RefaelAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
RefaelAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
How does your mapster configuration look like?
0
 
RefaelAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
RefaelAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
sorry, selected is a boolean value
$('table tr').on('mouseenter', function() {
     $('#model').mapster('set', true, '0.6.1');
  }; 

Open in new window

0
 
RefaelAuthor Commented:
Yes this one works :-)
0
 
RefaelAuthor Commented:
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
 
RefaelAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
Glad I could help! :)
0
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now