Sandvox musings

Someone asked if it was possible to create links from specific areas of an image. The questioner used a calendar (the one above) as an example, wanting, in this case, to link from marked days to pages of additional information.

A calendar-specific application might be more appropriate in this particular case, but as the question itself seemed to indicate the possibility of linking from areas of any type of image, I suggested using a small application called MapSpinner to create the necessary image map code easily. There might well be other such programs, but I have had MapSpinner for many years and it is easy to use and largely reliable. It does, however, generate HTML code that uses the "border" attribute, and this must be removed in order for the code to validate in SandVox (border is deprecated); also, no alt is provided for the img link, so this needs to be added.

For the purposes of this demo, I selected just three rectangular areas in the image (days 8, 10 and 12) and simply linked them to external pages. MapSpinner generated the required code, part of which I cut and pasted into the Raw HTML of this page to create the interactive image above.

I did make some changes to the code:

• I changed the URL of the src link in the img tag to point to the location from which I loaded the calendar image (if you are unsure about using pathnames, take a look here);
• I removed the border attribute that was present in the original MapSpinner code in the img tag;
• I added the alt parameter to the img tag.

Here's something else that can be done with MapSpinner: instead of linking to a URL, a ToolTip can be shown as the pointer passes over selected areas of an image. I have used this functionality below to identify the people in the photo: simply move the pointer over a face to see the name of that person (and there's one surprise, too).

And as if that's not enough, MapSpinner can also link areas of images to JavaScript.