jamietre / imagemapster Goto Github PK

I'm using this on a US + Canada map, so it has about 60 areas on it. If I try and loop through the areas, calling $('image').mapster('set', false, areaName) on each one individually, it absolutely crawls for a while.

Any suggestions as to what might be causing this? Could it be related to the fact that I'm using the full state names as keys?

Add an event when a tooltip is dismissed to match the creation event, this is difficult to obtain from a client.

After resize, renders get "cut off" at the old boundaries. VML canvas not taking new size?

Binding causes any classes to be replaced with "mapster_el" for the image copy. Change this to just add to the existing class instead. Make a note in the documentation about why you can't use ID-targeting css to style the image.

Hi,
just want to open url when area is clicked but nothing happens :)
everything else is working ok.
Ideas what I'm doing wrong?

<script type="text/javascript" src="../imagemapster.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('img').mapster({
   singleSelect: true,
   isSelectable: false,
   fillColor: 'f37135',
   fillOpacity: 1,
   stroke: true,
   strokeColor: 'fff',
   strokeOpacity: 1,
   strokeWidth: 2,
   mapKey: 'laani',
   listKey: 'laani',
   areas: [{
      key: 'lappi',
      onClick: go
}]
});
});

function go() {
window.open('myURL')
}

</script>

e.g.

mapster('set_options',{ some: option}','key1,key2,key3');

Sorry to issue-flood, but when I load this into a div using jquery load function, all my coords are recalculated to 'Infinity, Infinity'.

I suspect this has something to do with the state at the time when the initialization function is called, but I've tried waiting until the image has been loaded... with no luck. I expect whatever the fix is for the Safari issue is will probably fix this one, but it may be different.

Thanks for this plugin, it's great! One problem:

I started using the github version because of the safeLoad issue, but the latest github version gives a 'Zepto is not defined' error.

Did the most basic test with html:

<img src="images/PP-alt1280.jpg" alt="bg" name="bg" usemap="#bgmap" id="bg">
        <map name="bgmap" id="bgmap"> <area shape="poly" class="presence-link" data-mapkey="woman" coords="1115,906,1113,585,1108,558,1111,545,1112,505,1145,435,1187,391,1238,365,1277,364,1277,908" href="#" alt="woman" />

with javascript

$(document).ready(function() {

  $('#bg').mapster({

        mapKey: 'data-mapkey',

        areas: [
            { key: 'hat'

            },
            { key: 'sock'
            },
            { key: 'woman'

            },
            { key: 'sticks'
            },
            { key: 'mirror'
            },

            { key: 'feather'
            },
            { key: 'fairy'
            },
            { key: 'logo'
            },
            { key: 'triangle'
            },
            { key: 'cup'
            },
            { key: 'clock'
            },

            ]
    });

});

and I get the error below

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Sat, 3 Mar 2012 18:40:21 UTC

Message: 'key' is null or not an object
Line: 893
Char: 17
Code: 0
URI: http://localhost/pp/prod200212/js/jquery.imagemapster.js

I've been trying to use more than one image for different areas and I'm coming up blank on using multiple alternate images as selected states. It works fine when it's fillColor etc but not images. Any ideas? Code below:

var map = $('#dom_global');
map.mapster({
mapKey: 'data-name',
isSelectable:false,
render_select: {
fillOpacity: 0.9,
fillColor: 'ff0000'
},
areas: [
{
key: 'appartment-2',
staticState: true,
selected: true
},
{
key: 'appartment-4',
staticState: true,
selected: true
},
{
key: 'appartment-7',
staticState: true,
selected: true
},
{
key: 'appartment-8',
staticState: true,
selected: true
},
{
key: 'appartment-11',
staticState: true,
selected: true
},
{
key: 'appartment-14',
staticState: true,
selected: true
},
{
key: 'appartment-17',
staticState: true,
selected: true
},
{
key: 'appartment-18',
staticState: true,
selected: true
},
{
key: 'appartment-20',
staticState: true,
selected: true
},
{
key: 'appartment-22',
staticState: true,
selected: true
},
{
key: 'appartment-27',
staticState: true,
selected: true
},
{
key: 'appartment-31',
staticState: true,
selected: true
}
]
})
.mapster('snapshot')
.mapster('rebind', {
mapKey: 'id',
isSelectable:false,
render_select: {
fillOpacity: 0.9,
fillColor: '00ff00'
},
areas: [{
key: 'appartment-25',
staticState: true,
selected: true
}]
},true);

It works in all browsers except IE. $('#usa_image').mapster('set', false, selected); doesn't work for IE. It doesn't unset the area's. I tried with both single values: nr11 as comma separated: nr1,nr2. When rolling back to the non beta it works again.

As I understand, set_options doesn't update the 'view'. Rebind does that.

I have an image map with 20 areas.
I need to have some of them in a 'selected' state and with different fillColors (based on some logic)

So I do a 'set_options' with {areas: [{key: k, fillColor: color, selected: true}]}; and then call $(this).mapster('set',true, csvOfAreaKeys); This causes way too much memory (around 200MB) to get allocated by the browser (but which falls back to normal after 5-10 seconds)

I've tried doing a 'rebind' with the same {areas[]} object, but the result is the same.

The problem is that the colors are supposed to change based on a trigger of a slider (which the users move pretty quickly). The browser issues a 'slow script' warning within seconds of the user playing with the slider.

Is there a non-memory intensive way of setting the fillColor and 'selected=true' to take effect immediately without killing the browser?

anybody knows how to deal with this issue?

When user clicks on the selected area, it goes to area href="www.google.com.sg

Without imagemapster, it goes to that href link.
With imagemapster, it does nothing when i click on the area.

Anybody can help?

Thanks alot.

First of all I have to say how glad I am I found this plug in. I was trying to figure out how to highlight an image map area over a year ago and somehow I found this pretty quickly on a search.

It is exactly what I was looking for. I am using it to simply highlight the area on mouseover.

$('img').mapster({
mapKey: 'id'
});

However, there is an issue if I have the image map in a div like

I have found that the Chrome Extension "Facebook Disconnect" seems to break ImageMapster sometimes. I say sometimes because on Jamie's demo page it works fine whether or not I have this extension running. However, on a webpage I did, that extension pooches the page for me. Perhaps it's something simple, but I don't see it.

I used the vegetable tray demo as the basis for my work and the html file works fine if I view it locally or I view it with Facebook Disconnect turned off. However, if it is running and I visit the page online, it's broken. It's something to do with the mapping coordinates in the html. The weird thing is if I view the source, all is cool. If I choose in Chrome to "Inspect Element" and go down to the section defining the coordinates, all of them say coords="Infinity, Infinity, Infinity, etc"

It's the weirdest thing - it's probably more to do with my work than yours - after all, your demo page does work fine in the very same browser. Do you have any ideas what it might be?

The page in question is the "tools" section of http://www.pegasusplay.ca

Thanks!

It seems that if an image area has a href attribute, it always uses a pointer/hand cursor in Chrome/Opera/Safari. I would like to use a custom cursor (or at least a standard crosshair). IE and FF seem OK. I have tried CSS to apply the cursor and I tried a jquery mouseover to set the cursor. Neither seemed successful in the Chrome/Opera/Safari case.

Any ideas appreciated.

I really like your script, but my JS knowledge is too much limited to make it do what i want with it. Perhaps you could help me out.

I have a page with an image of a world map that is connected to a database. In the database there is data (percentage scale 0-100) for each and every country for multiple subjects. I'd like to divide the world countries into five different colors, depening on the data. So for example if the US is 80%, the color will be dark blue. If Canada is 50% the color will be light blue and so on.

Now everything works, but i am not able to make a startcolor per country. Any thoughts?

e.g.

key: "US",
toolTip: $('

The .mapster('resize') function is not done when the duration has finished. This causes problems when unbinding an imagemap after resizing. In my experience it takes up to 700 miliseconds after the duration has passed until the unbind is safe to take place.

Hi Jamie,

With the latest release I was getting the alt image as quite faded. I uploaded 1.1.3 from an old project and it's working fine.

Setup is as follows:

$('#careersImage').mapster({
altImage: '/images/sampleImageHover.jpg',
altImageFill: true,
altImageStroke: false,
altImageOpacity: 1,
fillOpacity: 1,
isSelectable: false,
fade: false,
noHrefIsMask: true,
onClick: go
});

function go(data) {
if (this.href && this.href !== '#') {
window.location.href = this.href;
}
}

Hi Jamie,

First, let me thank you for this plugin as it does everything I need for a particular project!

While tinkering with this plugin, I've noticed that it does not seem to work correctly with the Chrome browser - do you have any plans on when this support might be added?

Thanks!

In firefox only (6.0.2 tested), using masks (nohref or isMask option) causes problems with other areas. Confirmed in 1.2.1.

n.b. if I had a nickel for every time something works fine in every browser, even IE6, but not in Firefox...

The very last item added to the mapping, when being deselected will cause any items selected to also become deselected. Using the USA map example, here are the steps to reproduce:

1. Select Louisiana and any other state(s).
2. Select Louisiana again.

Result: All selected states will become deselected.

This only happens in IE.

Add API for using alternate fade & resize effects

Tooltip positioning can render on top of active area if the viewport boundaries do not permit correct positioning (nearest corner).

1 - detect viewport boundaries (right now only checks container boundaries) and attempt a different corner scheme if fails
2 - add callback on tooltip display allowing control over container position
3 - allow manual control of tooltip positioning (top/middle/bottom left/center/right, absolute, offsets) through an option

This is certainly a breaking change but the functionality makes sense. A very common question has been how do I navigate to an area when clicked. There is no way to do so except through javascript because ImageMapster intervenes, assuming click events are select/deselect.

Version 1.3 will assume by convention that any hrefs other than "#" are intended to be regular navigation links and "#" is a select/deselect action. This will cause imagemaps to retain their default functionality in addition to being highlighted by default.

Hello,

We are currently developing a project using your plugin (Thank you, btw!)

Is there a way to find out the click's coordinate (not the <area>'s 'coords' attribute) of where the user clicked on the image map?
Example usage would be: When the user clicked on the map, we would like to mark the location where s/he clicked.

Currently, we added another onClick event listener, but would like to put everything in mapster()'s onClick, if possible.

   $('#usa_image_map').click(function(e) {
      var imageOffset = $('#usa_image').offset();
      var x = e.pageX - Math.round(imageOffset.left);
      var y = e.pageY - Math.round(imageOffset.top);

      alert (x + ', ' + y);
   });

Thank you.
-stndn.

Hi,

I'm not sure the github issue tracker is the best place for problems that may not be issues. I think some kind of forum would be best!

Anyway, i have a problem, i'm trying to do this $('img').mapster('set', true,'1,5,10'); but nothing is happening for me. Any idea why? I seem to be following the docs example but what i'm expecting is not happening.

I presume "Set" allows you to tell mapster which areas should be initially highlighted / selected when the map is loaded?

Thanks

Options for better mobile/touchscreen device support

• make highlight optional on global or area basis
• disable automatically when touch screen devices detected to improve performance

I attempted to print an image map created with imagemapster and it does not print at all in IE 8. It shows up in the print preview, but then shows up as blank when actually printing...Any ideas?

Pushed this back to 1.4. Prototype broke after splitting mapster into modules, don't want to worry about this to get 1.3 finalized.

This discussion was begun on Outsharked.com. James indicated it would be better suited for github, so I'm including the original exchange, and then adding my new whinges to the bottom:

From me:
"While I appreciate your efforts, this seems to be beyond the layman such as myself. While I got maphilight up and running in a half an hour, I failed to get ImageMapster to do even the most rudimentary highlighting, let alone the more complex stuff I was hoping to achieve with it. A simple break down of how to implement your plugin would go a long ways towards making it accessible to the average web head (non-js coding web head, I should say).

Here's my map:
http://www.michigan.gov/documents/dnr/FMD_RS_378306_7.html All I want to do is have a mouse over of the Research Station button in the legend cause all of the research station areas to light up together as a group, thus identifying all of them at once, but still have the individual areas operate independently when the user mouses over one of those.

Thanks for your time."

Jame's reply:
"I've tried to provide many different examples on the demos page, with complete code for each. The simplest implementation is just $('img').mapster(); which will activate all the areas of any imagemap on the page when moused over. If maphilight works for your purposes, and is easier for you to use, then maybe it's a better choice, especially since it is a much smaller script. I'm not trying to replace maphilight, rather, ImageMapster is meant to provide features that are beyond the capabilities of that script. But using advanced features naturally requires a bit more understanding of their use, and the script can't predict exactly what you are trying to do.

The basic use is just to activate areas when you mouse over them, and no configuration is required for that. You're trying to do two slightly advanced things: activate areas from outside the map, which requires using script, and group all the areas together, which requires using the 'mapKey' option to identify the areas to group together, or use script to select them some other way.

The link you sent me doesn't look like it was set up for ImageMapster, since jquery.imagemapster.js is not included at all, so it's hard for me to tell what you have tried. If you can send me a link with your attempt to use ImageMapster I can take a look and give you specific advice.

The link below shows a copy of your map set up with with what I think you are trying to do using ImageMapster. We can do that by selecting all areas and calling "set",true to highlight them when you mouse over the link, and calling "set",false to unhighlight them when mousing out.

http://jsfiddle.net/CGaWF/

Another way that is a bit more flexible, in case you want to be able to define other groups, is to use a "mapKey" and define an attribute on each area, and assign two groups to each area: a unique one first, so that they will highlight individually on mouseover (the first group is always what applies on mouseover), followed by another one that is the same for each group, that you can use to highlight them all at once from code. I've used "data-group" here:

http://jsfiddle.net/2Y5TJ/

Hope that helps. If you have more questions, the project page on github http://www.github.com/jamietre... is a better place to ask them (it's just more conducive to Q&A and it's better structured for other people who may be looking for answers to a similar question to find them)."

My New Whinges
That's great, thanks. I don't actually want to activate areas from outside the map , I want the last rectangle on the legend (which is part of the image) to cause all of the areas to light up. I was able to use the code you created to do that, though, by deleting the text link and adding a new hotspot with the id "researchStations" covering the last rectangle on the legend. Here's the result (For some reason that's not working in Chrome for me right now, but it is in Firefox, and I could swear it was working in Chrome when I tested it...). Thanks for your help with that, I really appreciate it.
I'd like to preface this next part with the claim, "I'm generally not so feeble/helpless when it comes to this stuff," but, now I'm having trouble configuring that script to add a bright red border and lower the fill opacity. I've been looking at your other demos where I see things like this one from the big usa map:

$('#usa').mapster({
    fillOpacity: 0.5,
    render_highlight: {
        fillColor: '2aff00',
        stroke: true,
        altImage: 'examples/images/usa_map_720_alt_4.jpg'
    },
    render_select: {
        fillColor: 'ff000c',
        stroke: false,
        altImage: 'examples/images/usa_map_720_alt_5.jpg'
    },

I can't figure out where I would add code like fillOpacity: 0.5 to the script you whipped up for me. I'm using Dreamweaver, and whenever I add some snippet into the code you sent, it doesn't work and Dreamweaver indicates there's an error on some line or another. Again, I'm not a java coder, I'm strictly HTML/CSS capable.

You've gone out of your way for me already, and I'll understand if you feel you've done enough!

Thanks,

Matt Clara

Hi,

I pretty much had a complete project working with maphilight until I found yours and decided to give a shot.
Well to my disdain I have not been able to make it work not even once!

Questions

• Do I need jquery UI?
• Do I need to assign class="map maphilighted" to my image?
• Do I need to assign
  to where my image is?

Thanks in Advanced, Ivan

Here is my code!

{{{

    <map name="mapEpicTW_Map" id="mapEpicTW_ID">
        <area shape="poly" id="aTW01" rel=gtw0102 href="#" coords="307,60, 392,65, 390,72, 395,73, 400,70, 405,68, 411,68, 416,69, 422,71, 426,74, 443,68, 444,72, 445,77, 446,83, 446,90, 446,97, 445,103, 441,118, 439,125, 384,108, 384,109, 384,108, 378,127, 364,123, 364,123, 364,123, 347,136, 346,135, 345,135, 349,132, 350,132, 357,127, 350,118, 341,125, 314,88, 298,67, 307,60">
        <area shape="poly" id="aTW02" rel=gtw0102 href="#" coords="47,252,55,245,71,267,98,303,89,310,95,319,103,314,102,313,106,310,107,311,107,312,90,324,90,325,89,325,89,340,69,339,69,339,69,339,69,397,61,397,46,396,40,395,33,393,26,391,21,388,16,386,13,384,24,369,22,364,22,358,22,353,24,348,28,343,32,339,33,334,25,334,47,252">

        <area shape="poly" id="aTW03" rel=gtw0304 href="#" coords="364,124, 379,128, 384,110, 439,126, 434,141, 428,157, 423,169, 416,184, 410,197, 402,210, 402,210, 397,206, 340,172, 345,163, 353,147, 356,140, 348,136, 364,124">
        <area shape="poly" id="aTW04" rel=gtw0304 href="#" coords="91,325, 108,313, 109,323, 117,322, 135,318, 144,317, 161,387, 147,390, 133,392, 116,395, 103,396, 86,397, 70,397, 72,340, 91,340, 91,325">

        <area shape="poly" id="aTW05" rel=gtw0506 href="#" coords="317,189, 325,195, 331,186, 340,173, 370,191, 370,190, 402,210, 398,217, 396,216, 389,226, 381,238, 365,258, 304,206, 311,198, 317,189">
        <area shape="poly" id="aTW06" rel=gtw0506 href="#" coords="168,299, 177,296, 188,292, 205,334, 218,366, 195,375, 182,379, 169,383, 169,385, 161,387, 159,376, 153,351, 154,350, 146,316, 160,312, 170,310, 168,299, 168,299">

        <area shape="poly" id="aTW07" rel=gtw0708 href="#" coords="304,207,365,259,358,268,348,278,337,290,324,302,308,315,303,308,294,315,254,260,270,248,282,240,276,231,290,221,304,207">
        <area shape="poly" id="aTW08" rel=gtw0708 href="#" coords="188,291, 188,291, 205,283, 219,272, 226,280, 237,272, 253,260, 293,315, 285,321, 289,328, 272,339, 257,348, 242,356, 229,362, 219,366, 206,334, 188,292, 188,292, 188,292, 188,291">

        <area shape="poly" id="aTW09" rel=gtw09101314 href="#" coords="218,126, 260,182, 246,192, 246,192, 246,192, 241,196, 219,212, 209,199, 178,156, 177,156, 177,156, 218,126">
        <area shape="poly" id="aTW10" rel=gtw09101314 href="#" coords="137,186, 177,157, 209,200, 219,213, 196,229, 191,233, 192,233, 191,233, 178,243, 137,186">
        <area shape="poly" id="aTW13" rel=gtw09101314 href="#" coords="259,96, 298,67, 314,89, 339,124, 319,139, 319,139, 319,139, 314,142, 301,152, 259,96">
        <area shape="poly" id="aTW14" rel=gtw09101314 href="#" coords="95,217, 137,273, 124,283, 119,287, 119,287, 119,287, 99,302, 73,266, 57,245, 95,217">

        <area shape="poly" id="aTW11" rel=gtw1112 href="#" coords="259,96, 300,152, 278,169, 278,169, 278,169, 278,169, 273,172, 260,182, 218,126, 259,96">
        <area shape="poly" id="aTW12" rel=gtw1112 href="#" coords="96,216, 136,187, 177,243, 164,253, 159,256, 160,257, 159,256, 137,273, 96,216">
    </map>

When src and not image are set in a call to addImage, it creates a new image using the src reference.

If the original image tag has an explicit width and height set, however, this information is not applied to the copy.
This results in an image map that is one size and image which is another.

In the end, I passed a reference image to addImage, as well. If a new image is made from src and reference image is set then the reference image's width and height are applied to the copy.

It would probably be cleaner to just write an addImageCopy method which takes an image, fetches its source, creates a new image, copies the original size (and whatever else might need to be copied), then calls the original addImage with the copy.

All of the examples seem to have working tooltips using the 'tooltip' option, e.g.

areas = [
    key: 'myKey',
    tooltip: 'My tooltip'
]

This didn't work for me. Instead, the option 'toolTip' (Tip's T is uppercase) worked. Should the documentation be updated, or is this not the expected behaviour?

Allow passing render options directly with API "set" and "highlight" to simplify manual control over area styles.

Specification for describing options in 1.3

Allow passing any options as an attribute on the image:

data-mapster='{"json": data}'

Allow area-specific options on area tags using same convention
Options can be specificed either as JSON data, or using the attribute name

data-mapster='{"strokeWidth": 2}'
data-mapster-strokeWidth="2"

While not especially byte-efficient, should greatly simplify config, especially for users with limited javascript knowledge.

I would like to apply a different color depending on dynamic availability.
I tried this

MapKey 'titlle'

         Areas: [
             {
             key: "full",
             fillColor: "ffffff"
             }
             {
             key: "free"
             fillColor: "000000"
             }
             ]

But in OnHover, all items in the group appear. I would like to bring up one.

Is it possible to disable the display group?

Thank you in advance
Best Regards
mapoubelle35

Having trouble assigning different colors and selectable/deselectable option depending on listkey value. What I'm trying to do is select specific areas upon page load (and make them unselectable) while allowing selection of other areas. i'd like the two in different colors if possible. Here's the code:

$('#wt_chart').mapster({
    fillOpacity: 0.4,
    fillColor: "d42e16",
    stroke: false,
    singleSelect: false,
    mapKey: '',
    listKey: 'status',
    onClick: function (e) {
        if ($(this).attr ('status') == "resvd") {
            alert ("seat previouslty reserved.");
            return;
        }
        $(this).attr ('status', 'temp');
        },
    showToolTip: false,
    areas: [
        { key: "open", fillColor: "FFFFFF" },
        { key: "resvd", fillColor: "FAFAFA", selected : true, isDeselectable : false },
        { key: "temp", fillColor: "BCBCBC", selected : true }
        ]

});

PS: If I assign the same value to both mapKey and listKey, I get an error. it's one or the other.

PPS: Had trouble running the minimized script in Win7/Firefox. Had to use the full code.

explorer canvas breaks imagemapster when active (IE<9), most likely because of duplicate VML namespaces. Change to use same naming convention and detect first to avoid conflict.

All demos on http://www.outsharked.com/imagemapster/default.aspx?demos.html does not work in Safari5.1/mac

Try this code in jsfiddle. Not working in IE9

$('img').mapster({
mapKey: 'state'
});
$('img').mapster('highlight', "WV");

(Moved from feedback on web site)

This is pretty cool, but I'm having some issues getting tooltips to display. My JS looks like:

            showToolTip: true,
            toolTipContainer: '<div id="tooltip"></div>',
            areas: [{
                key: "East", 
                toolTip: "Don't mess with Texas"
            },
            { 
                key: "Central",
                tooltip: "Central, yo"
            },
            {
                key: "West",
                tooltip: "Go west, young man!"
            }]

and I've got key attributes set up for each area, set to East, Central and West. On hover or click, I'm not seeing anything happen, no errors in the console, and no elements being changed in the DOM.

Am I missing something?

Thanks!
-Rob

Hi There

I tried your nice tool to hilight an image wap. It works perfectly as long as i am not using together with jquery UI or Doogal Bell's nice image map plug-in zoomable:
http://doogalbellend.blogspot.com/2010/03/jquery-zoom-addin-with-image-map.html

There is no particular javascript error, but somehow those plug-ins are not working together, neither does the standard jqueryUI. I think it would be awesome to have a zoomable area image map with hilight (extremly helpfull for large interactive maps). Maybe you know what i should do to hook up this two plug-ins.

Best
marc

The fix for masks in firefox 6.0 broke masks in firefox 3.6. I LOVE YOU MOZILLA!

There are a number of inconsistencies in Mozilla's implementation of canvases, particularly source-out, between different firefox versions. ImageMapster depends on this for rendering masks. I may deal with this by just adding an option to force using IE mode (e.g. render as a color) if I cannot come up with a universal solution. It's getting a bit ridiculous to code around every nuance of every version of firefox.

We want to have a specific color per area. Is this somehow possible or could you add this to your imagemapster?

Something like:
<area shape="poly" alt="" class="hoi8" rel="#FF0000" coords="" href="8" title="" />

using the rel to set the color.

First of all thanks for the awesome plugin. I am a engineering college student in Bangalore,India doing my internship and your plugin has saved me a lot of work.

http://jsfiddle.net/JpgYm/2/

Above is my code I'm trying to make my image map scalable so that it can be used on android devices.Its a simple game where user can select part of the image and then select the relevant option button.

I tried using the mapScale option setting it to true. I haven't used any css here.So how do I scale the image? I did read the docs but I couldn't figure it out.

Also I'm new to fiddle, I tried separating the js and html , it didn't work so I put it all together, its sort of working but its not showing the imagemap but if you copy the same code and run it on chrome or firefox, it works perfectly well(except the image scaling)

cheers,
Rahul Agarwal

Hello,

Is it possible to support highlighting of area with hole in the middle?

An example would be on your second demo, we would like to highlight the green pepper but leave the dipping as is.

HTML-wise, we defined the dipping's <area> before defining it for the green pepper. But when hovering over the green pepper, it would highlight the dip as well.

Thank you.

Hi,

I was wondering if you could help me out a bit with this again please!

onStateChange didn't work out for me, so i've gone down the route of using the onClick event from the mapster function.

In the onclick, i'm doing this:

onClick: function(data)
                {


                    if (data.key==='999') {

                        var stateArray = [103,114,78,72,116,33,32,117,43,35,113,112,57,96,19,10,92,23,89,51];

                    $('img#usa_image').mapster('set',data.state,stateArray);
                          }
}

This works okay when i click on the region to highlight it, but then deselecting (un-highlighting if you will) takes a very very long time to execute that code.

Do you have any idea as to why?

Thanks!

I'm trying to make a external call to select certain area's in my image map. But I just can't get it to work. Or I'm reading the documentation wrong or I'm doing something wrong. But cloud you please check it.
This is the code I use:

        $('#usa_image').mapster({
            isSelectable: true,
            mapKey: 'class',
            mapValue: 'full',
            listKey: 'name',
            fillColor: '78aed7',
            showToolTips: true,
            fillOpacity: 0.5,
            stroke: 0,
            showToolTip: false,
            onClick: function (data) {

            },
            areas: [{
                key: "hoi4",
                selected: true
            }]
        });

        $('img').mapster('set',true,'hoi8,hoi7,hoi6');

When I call the underlying code it should select the 3 area's
$('img').mapster('set',true,'hoi8,hoi7,hoi6');

But I'm getting this error:
Uncaught TypeError: Cannot read property 'data' of null

I also tried replacing $('img') for $('#usa_image') but still no joy.

Hi, Jamie, like I told you I was going to do extensive testing and I did.

I believe there is still something wrong with IE. Basically what I did was once the page load I click back and forth on the areas of the building that have key plans (Upper Penthouses, Lower Penthouses, Tower and Townhouses) once it load I hover over the key plan on the right to make sure the areas are hi-lighted and then click again in another area of the building. I did my testing with HP computers with both IE8 and IE9 when I do what I just told you and after about the 12th iteration (sometimes the 13 or 14) the hi-lighting over the are being hover stops. In the same computer I installed Safari and did the same testing and basically I did as many as 40 iterations three or four different times and never failed!

The new link is http://www.brickell-realty.com/epic1.html

Ivan