Hello All,

Can someone please advise, i have an image map as per photo attached 225x225 px and i need to create a rectangular hotspot so when clicked on transferred to http://www,kitkat.com.  (website).  Im a student and learning. 

Hey. Um, would it not be simpler to just link the image?

<a href="https://www.kitkat.com/"><img src="/yourimage.jpg" alt="Take a Break"></a>

You could use image map but there's no real reason to?

thanks for your help much appreciated, but i think they want a square section only within the sign clickable. called a square hotspot?

That's not good UX. People don't expect hotspots. The expect to touch an image (on desktop, tablet and phone) and not have to hunt for a hotspot. Especially one that only 225 square and will almost certainly be a lot smaller on a phone.

But if you really want a hotspot the image map link @BrowserBugs posted might work

Edited January 9, 20206 yr by fisicx

I think it is a good idea to do it like that but if you want you can use a tool like https://www.image-map.net/ to create hotspot for your images.

2 hours ago, fisicx said:

That's not good UX. People don't expect hotspots. The expect to touch an image (on desktop, tablet and phone) and not have to hunt for a hotspot. Especially one that only 225 square and will almost certainly be a lot smaller on a phone.

Totally agree. But as they've said it's learning image maps. In which case to get the following area I used Photoshop to measure the area we want.

<img src="take-a-break.png" alt="Sign" width="225" height="225" usemap="#kitkat">
<map name="kitkat">
<area shape="rect" coords="39,21,187,193" alt="Take a Break" href="https://www.kitkat.com/">
</map>

... but please read image map to ensure you know how it all works, especially how the coordinates are calculated.

Edited January 9, 20206 yr by BrowserBugs

Remember also that the image map will only work if the image is 225 x 225. If you have a smaller image on mobile phone it won't won't anymore. Same if people zoom in and out.

@fisicx on desktop at least  if you zoom in in chrome it retains the coordinates and still works. using a style of max-width: 100% on a screen smaller than 225 shrinks the images but the coordinates remain the same, thus breaking the image map. But, are there any circumstance under which the image would be smaller than 225? on the other hand if this was for example a clickable map or diagram then it probably wouldn't work responsively as either the 'map' would become too small or mulitple clickable targets would be too close together. for this scenario you could then unhide a list clickable links (styled as a list )for when the image map can no longer function as an image map. 

I recently had the same problem but didn't use an image map but instead svgs positioned absolutely by precentage) within a parent container so the links always work when scaled, and then when they become too difficult to click on the image, display a list of the links like a legend to a diagram

I agree.

It's more about handheld devices - which is what most people use for casual browsing.

This seems really unnecessary to shave off about 60px on an image, it's much easier to just set the precedence with your client that the entire image should be linked.

Fisicx is right. Since it's using fixed coordinates, if the image changes size you'll have to put work into getting the image map to scale correctly. Also, if the image itself changes you may find it's not placed in the correct area at all.

This sort of thing can seem fine initially, but your client may want to do this with more than one image. If that happens you'll end up with a bunch of redundant code everywhere, and the site will be more difficult to maintain.

@jack "This seems really unnecessary to shave off about 60px on an image, it's much easier to just set the precedence with your client that the entire image should be linked." i agree  but it's probably being used an as example of linking areas in image maps when it does make sense (e.g. a geographicalmap with clickable areas) but is starting them (the students) with a simple example

I didn't actually see the student part. Learning how this works is fine, although, I haven't seen the map syntax used in ages.

I still think a lot of this type of UI stems from print design and usually translates poorly on the web. For example, a geographical map is fine in principle, but only if your users know where the location is on a map. Even something that seems trivial should be followed by direct links to the pages with text, at that stage you have to wonder if the graphic is even worth adding to begin with, especially if it's not just a straight-forward image.

8 hours ago, BrowserBugs said:

Totally agree. But as they've said it's learning image maps. In which case to get the following area I used Photoshop to measure the area we want.

<img src="take-a-break.png" alt="Sign" width="225" height="225" usemap="#kitkat">
<map name="kitkat">
<area shape="rect" coords="39,21,187,193" alt="Take a Break" href="https://www.kitkat.com/">
</map>

... but please read image map to ensure you know how it all works, especially how the coordinates are calculated.

wow many thanks for your help im struggling through but getting there