I have the following image:

enter image description here

I would like the canvas fit the exact shape of the room shown on this image. The goal is to include this image on my website and create a little effect whenever someone clicks on this image. The issue so far is that whenever someone clicks on the invisible area around the room, the effect starts as well because the invisible area with grey squares also belongs to the image being exported.


Yea. You can't save your image like that.

You could do the clickable areas with image map.

Image Map example:

enter image description here

  1. Example code
  2. I used this image map generator to draw the outlines of the floor plan. You can find many of these types of tools online.
    • Basically you upload the image and click to create points around the shape you want to turn into a clickable area, and repeat that for each shape.
  3. Used jquery to switch the src of the img based on which area was hovered over.

Also, you could do it using svg.

SVG Example:

enter image description here

  1. Example code
  2. Brought the image over to Illustrator and traced over the raster image to create 2 separate objects that cover the outline of the floor plan.
  3. Exported as svg.
  4. Used css to color in the fill and stroke, when each polygon is hovered.

You would probably have to do this in Inkscape. Pretty much any vector application should work, as long as you can export it to svg easily.

This method is more or less how these types of maps are usually made these days.

| improve this answer | |
  • I used hover in my examples, because it's easier to test, but you could very easily replace it with click functionality. – Joonas Aug 29 '16 at 10:56
  • I have to admit this is a very neat and nice solution. Thx. – LandonZeKepitelOfGreytBritn Aug 29 '16 at 14:47
  • very stupid question: how do you add the "jquery edge" library to your js code? I tried to add this in the header, but didn't work <script src="code.jquery.com/jquery-git.js"></script> – LandonZeKepitelOfGreytBritn Aug 29 '16 at 15:25
  • @trilolil I wouldn't use a cdn link like that leads to the "edge version" indefinitely. "Edge" means it's the latest version of jquery. If you do that, the latest file will keep on changing, until at some point your code would stop working (maybe), or there could be other unwanted changes. You could try this google hosted one to the current latest version (3.1.0): <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> . You can always host the file yourself too, and link to it like any other file. – Joonas Aug 29 '16 at 16:28
  • Tried your link, but unfortunately doesn't work: imgur.com/a/CR7vk – LandonZeKepitelOfGreytBritn Aug 29 '16 at 20:17

You can't do this in GIMP and, as far as I know, in any raster graphics editor. None of PNG, JPEG, GIF, WEBP formats can hold image that is not in rectangular shape. And the web browsers could not handle this.

However, it can be done in HTML after you export the image. Do you (or your webmaster) have access to the source code? Or you use Blogger, WordPress or Tumblr etc.?

EDIT: According to your taskbar, you can edit the source ;) Have a look at HTML <map> tag. I recommend using <area shape="poly">.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.