Solved

jQuery Imagemapster

Posted on 2013-11-07
16
1,380 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
ID: 39629860
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
ID: 39629887
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
ID: 39629910
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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:Refael
ID: 39629991
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
ID: 39630003
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
ID: 39630037
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
ID: 39630101
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
ID: 39630104
How does your mapster configuration look like?
0
 

Author Comment

by:Refael
ID: 39630159
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
ID: 39630513
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
ID: 39630583
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
ID: 39630641
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
ID: 39630796
Yes this one works :-)
0
 

Author Comment

by:Refael
ID: 39630804
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
ID: 39630894
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
ID: 39630934
Glad I could help! :)
0

Featured Post

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

828 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