I’ve always wondered how to do this! Finally!
It’s mundanely straightforward to hyperlink an image so that clicking anywhere on that image will open a link. This is often used with a thumbnail image of a document; clicking it downloads the full document, for example, or on sites like Amazon etc where you click on a book cover to find out more about the item on sale. Pretty much a one-image, one-link arrangement.
But having different areas of the same image point to different links has eluded me, until now. It’s the AREA attribute in HTML that will do it, example below.
A year or two ago there was a paid-for app that let you generate multiple clickable areas in a single image, I’ve also seen discussions about needing to use something fairly complex like Photoshop to create some sort of ‘net’ over an image, onto which links could later be applied. Other places do it with CSS which isn’t complicated but I think you can’t do it on free WordPress dot com blogs (or it conflicts with the presets). I’ve been too easily discouraged 😉
Area attributes in HTML let you create clickable areas within an image!
The only thing you can click on in the image below is the big red flag. Click on it to find out about the AREA COORDS attribute on W3Schools site 🙂
This way is free and technically quite easy. I think the hardest thing will be getting my head around the coords (coordinates) attribute. For starters 0,0 refers to the top left not the bottom left as in a maths graph (I’m grateful to my boss for teaching me how to make .svg images which helped me discover this concept, and almost make sense of it). So for a RECT (rectangle) you just input the top left (x,y) and bottom right corner (x,y) coordinates of a rectangle and it fills in the rest. It had never occurred to me that you need only two coordinates to describe a rectangle – I can see that it’s perfectly obvious why, I just never had cause to consider it before.
For a circle you give the x and y coordinate of the centre of the cirlce, then its radius (this is all explained in the W3Schools page linked above and also here.
You need to pay attention to how big your image is – if its width is 600 and you want to create a shape starting halfway along but touching the top of the image then its x,y coordinates would be 300,0 (300 along from the top left, or halfway, then 0 down from the top).
For the red flag in the image above I fiddled about a bit with it and went with went with 150,0,250,80. It’s not perfect but I feel like I’m flying blind somewhat. With a bit more work I could probably make it match better, and with even more effort I could probably generate a much more accurate polygon shape to match it more closely, but you get the idea – and it works. It probably doesn’t help that I don’t have much of a sense of direction and feel that I’m doing this ‘backwards’ though!
While I could create additional shapes and links on the above-image I’m starting small and am delighted with this evening’s tinkerings and lucubrations. I just hope it works when I press ‘Publish…’. (It worked in Preview!).