The background image

As with regular CSS sprites, the background image should include both the 'neutral' state for each area and the 'hover' state. A rectangular box around each area to be highlighted is defined. This representsthe part of the background image that will be displayed on hover. See where the boxes are defined for each area with this map.

For irregular images such as this one, it is impossible to draw these boxes without overlapping other areas that also need a hover state. Thefore, the background image repeats itself enough times for this to happen. In this instance, Scotland and Wales make up the first copy of the background image, and England and Ireland the second. Northern Ireland is placed in the margins because it doesn't quite fit with any other combination of countries. The end result looks like the image to the right.

The display layer

In order to construct the display layer, the first thing that is needed is to show the neural state of the map. A list is created with its background image set as the full map created above. This list is given dimensions such that only the neutral state of the map is shown. A container div is also created. The paragraph tag is there simply as a place to house a bit of descriptive text. It is absolute positioned, and given a z-index such that it overlays the list.

List elements are created for each area. Each list element is given a unique ID and dimensions corresponding to the rectangular boxes determined for that area when constructing the image. They are then and positioned in the correct spot and the background set such that only the desired highlighted area is displayed. They are hidden by default.

The image map

An image map provides the mechanism to match the higlighted area to an irregular shape. Each area within the image map is given a unique id that matches its corresponding list element, only with the addition of "area_" at the beginning for the image map areas. So for Scotland, the list element is id="Scotland" and the image map area is id="area_Scotland". This image map is assigned to a 1px transparent gif that is given a z-index such that it is on top and stretched out match the same dimensions and position of the neutral map of the British Isles.

In this particular example, a couple empty of image map areas are created for the seas between Ireland and Britain purely for usability's sake. The JavaScript displays "Britain and Ireland" when the user is not hovering over an active area. However, when a user moves their mouse from island one to the other, the empty seas between cause the words to flicker annoyingly. The empty image map areas provide a simple way to solve this problem.

Putting it all together with jQuery

Finally, a bit of JavaScript is employed to tie the image map to the list elements below. On mousing over an area, the javascript checks to see if that area has an id. If so, it matches it to the corresponding li by getting the area’s ID, stripping "area_" from it, then displays the list element who’s ID matches this variable. It also grabs the area's Alt tag and uses that to replace the text of paragraph.

Upon mousing out of an area, the script hides the corresponding area using a very similar process. The default text for the paragraph is also replaced. With this, the map is complete!

The HTML

In this example, a simple 3 field form is being employed. When setting a form up to be used with this script, the form tag and any input fields accessed by the script need a unique ID. The content class descText meant to cause descriptor text to stand out from regular text, and is placed into the form by the JavaScript.

The data

The first thing that is needed is a way to store information about which fields need what values inserted. I have chosen to use a JSON object for this, as it is very easy to read, manipulate, and expand when additional functionality is desired. The contact form on this site adds required field information and error messages to its data object, for instance.

For this example, fieldID stores the ID of each field to be manipulated and sampleText stores the value to be placed in it. This data structure, and the ID of the form being processed, are then passed into the main function, formDescriptorVals. The rest of this script takes place within that function.

Placing the descriptor text in the form

The first two variables declared in this section, formID and curFormFields, concatenate some information for convenience.

This script block places the descriptor text into the appropriate fields upon first loading the form. The script loops through the arrays of objects within formSettings using a for/in loop. For each array, the script retrieves the fieldID and places it into a jQuery object. The associated HTML input is then accessed to check and see if there is a value already present within the input. If not, it places the sampleText for that array into the HTML field with that ID.

During this operation, the CSS class descText is added to any field where descriptor text is being inserted.

Creating the focus event

When a user focuses on any field in the form, a check must be performed to see if that field has been defined somewhere in the formSettings data object. A function, checkValue, is called that compares the focused field’s ID against the fieldID data stored in formSettings. If the function finds a match, it returns the key value for that array. This allows the script to directly access that particular array within formSettings.

The sampleText object for this array is then compared to the current value of the associated field. If sampleText data is present, the field’s current value is cleared and the CSS class removed so the user can enter their own data. If no match is found, meaning the user has previously entered a value into this field, no action is taken.

Creating the blur event

When the user leaves the field, a check very similar to the focus event must be made. This time, if the field value is blank and the field has been defined witin formSettings, the sampleText for that field and the css class descText are both replaced.

Creating the submit event

When the form is submitted, any sampeText data still present in any field must be cleared without removing user entered data. The script loops through formSettings and accesses each field with at the ID corresponding to a fieldID stored in an array. If a match is found between the actual value and the sampleText for that field, the sampleText is cleared.

With this, the code is complete and ready to go!