Questions tagged [imagemapster]

ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that JavaScript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.

ImageMapster started as a fork of David Lynch's MapHilight in early 2011. I wanted to add the ability to keep areas selected. I had a lot of ideas for interesting things that could be done with image maps, so ended up adding many more features. In the months since this began, I pretty much rewrote it from the ground up, but a few parts of the code, most notably the core VML rendering code, still inherit directly from its MapHilight roots.

I have put a great deal of effort into ensuring that ImageMapster will work reliably in many environments. Often, images will not be finished loading when the rest of a page has finished being configured. JavaScript code will usually begin running before some page images have finished loading. It is critical that images be completely loaded before ImageMapster can configure itself: it needs to know their native and display sizes, make copies, and do other work. The software uses a number of different methods, depending on the browser, to ensure that everything is ready when it begins configuration.

Additonally, ImageMapster will queue commands issued to it before configuration is complete. This means you can write post-configuration code that works against your image map without concern for the timing of images being loaded. Any commands that ImageMapster receives before it's done configuring will be queued, and processed in order once configuration is complete.

ImageMapster uses HTML5 canvases to do its work in modern browsers. In older browsers (Internet Explorer < 9) it uses VML to achieve similar effects.

ImageMapster works in all major browsers (Internet Explorer 6+, Firefox 2+, Opera, Chrome, and Safari) and on mobile devices.

134 questions
20
votes
6 answers

How to get the path coordinates of a shape for use with image-maps?

I am creating an image map using ImageMapster from here. I have created a photoshop image with several images that I have cut out from the original photographs. Each image is on a separate layer. Now, I need to get the path coordinates of each…
bgmCoder
  • 6,205
  • 8
  • 58
  • 105
4
votes
0 answers

Javascript in Edge only works with devtools open

The problem I have is that in MS edge, my imagemap functionality's only work partially. It is powered by the knockout FW. On bigger imagemaps, it doesn't registers the entire imagemap into the viewmodel. As a result all the hover effects and the…
4
votes
0 answers

ImageMapster ToolTip position with the browser border

I have a problem with the tooltip. When I hover on an area, a tooltip box appear on the top-left of that area. When the area is near the border of the browser, the tooltip box still appears at the same position, making some information hidden as…
Duy Tran
  • 311
  • 1
  • 8
4
votes
4 answers

jQuery plugin imagemapster isn't doing anything

I'm still relatively new to javascript and jQuery so keep in mind that it may be an obvious solution that I don't see. I referenced jQuery and it works fine for other things. Maybe there's something wrong with the imagemapster reference? I…
Baga Jr.
  • 153
  • 3
  • 6
  • 12
4
votes
1 answer

Scale ImageMap coords with dynamic sized images

I'm looking for a way to make my dynamically scaled images fit with the image maps i'm making. I'm using jquery to scale the images with the window size: $(window).bind("load resize", function(){ $(".post…
DERSU awesome
  • 41
  • 1
  • 2
3
votes
3 answers

Responsive image map resizing with imageMapster: do I misunderstand what scaleMap does?

When an image is styled with CSS to grow or shrink to occupy available space in the container DIV, what steps must be taken to keep the image-map area coordinates in sync with the changing image size? img { /* border: 2px dotted red; */ …
Tim
  • 8,669
  • 31
  • 105
  • 183
2
votes
3 answers

jQuery interactive map library?

I'm looking for a jQuery library or plugin that is a map of the United States, with rollover events and a click event that will return the state which you clicked on. I see it a lot in Flash, but never in jQuery. Does anyone know of anything like…
Steven
  • 18,761
  • 70
  • 194
  • 296
2
votes
1 answer

HTML Initially resize image and change position

In my code I have an image within a div that has map areas, and depending on variables passed from URL I want the image to be initially zoomed on the area given by the variable. I am using imagemapster for interactive map features, and while that…
Alan Deng
  • 21
  • 1
2
votes
1 answer

ImageMapster javascript plugin tooltip isn't showing the right position

So I'm making use of the plugin ImageMapster and I'm making use of the tooltips. Problem: The problem I have with this plugin is when I use the tooltip it relocate completely different as you can see here below As you see i hover over the dark…
Noah Telussa
  • 151
  • 1
  • 14
2
votes
1 answer

Is it possible to hide/disable areas in ImageMapster?

I've created an image map using the code: $('img').mapster({ staticState: true }) All areas are selected at once and visible. Is there any way, any method I could hide/disable some areas so that they wouldn't be visible ? I would like to filter…
Marcin Wasik
  • 100
  • 7
2
votes
2 answers

responsive image with maphilight.js

My images stop being responsive after I enable maphilight. First I made the imagemaps responsive with rwdImageMaps.js, works fine. But after I enable maphilight the images themselves stop being responsive. (The imagemaps stay responsive…
Ludo
  • 115
  • 4
  • 14
2
votes
2 answers

ImageMapster with multiple images and maps

Is it possible to use ImageMapster with multiple images and maps? In my scenario, there are multiple images. Each image has its own unique map, and only one image is displayed at a time. When part of one image is clicked, it changes to another…
2
votes
2 answers

How to make text box appear when hover over on the image map?

I am trying to make a text box appear when hover over hotspot on image map. This is what I did to make text to appear when I hover over.

user2747356
  • 55
  • 1
  • 3
  • 8
2
votes
1 answer

imagemapster different areas with different colors

I was wondering if the following is possible with imagemapster: i need area 1 and area 2. When i hover one of them both have to highlight but in different colors, for example area 1 is blue and green when i hover one of them and area 2 is yellow and…
rrger
  • 29
  • 1
  • 6
2
votes
1 answer

ImageMapper Beatles demo won't run outside jsFiddle

This is really just a javascript question that is parenthetically related to the ImageMapper jQuery plugin. I must re-ask this question which was closed due to poor question construction and unclear responses from OP. However, I am having identical…
cssyphus
  • 37,875
  • 18
  • 96
  • 111
1
2 3
8 9