Originally from ticket #12850.
I can't figure out how to do it. ...
Thanks for your help!!
You would need a "pure html" image map. I found this on Wikipedia:
A client-side imagemap in HTML consists of two parts:
the actual image, which is embedded with the <img> tag. The image tag must have an attribute usemap, which names the imagemap to use for this image (multiple imagemaps may exist on a single page).
A <map> element, and inside that, <area> elements, each of which defines a single clickable area within the imagemap. These are similar to the <a> tag defining which URL should be opened for an ordinary web link. A title attribute may be provided, which may be rendered as a tooltip if a desktop user hovers their mouse pointer over the area. For web accessibility reasons, it is often important - and in some cases it may even be a legal or contractual requirement - to provide an alt attribute describing the link that screen reader software can read to, for example, blind users.
The following example defines a rectangular area (9,372,66,397). When a user clicks anywhere inside this area, they are taken to the English Wikipedia's home page.
<img src="image.png" alt="Website map" usemap="#mapname" />
<area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
You will need to put this into a text area using the html tool. You could upload/insert the image using the image tool in the text editor and then go to html edit mode and add the other html code. The "href=" parameters would be the links that you can copy for the locations on the page already.