The red dots in both the divs above are a simple means of showing how mapping of objects on a webpage can be acheived.  Modern browsers allow us to use the pseudo class :hover to highlight or place borders around objects as the cursor is moved over them.  In the divs above, the CSS is currently using -

#map ul li:hover, #map1 ul li:hover {
   border:solid 1px #00f;
}

to effectively show blue borders round the dots.

Internet Explorer 6 and earlier versions do not recognise the :hover class, other than when associated with a:hover.  However, all is not lost and JavaScript event handlers can be used to achieve the same thing in all browsers.

Click the "Start Script" button above, and when running your cursor over the dots above, the borders will now render as lime.  This is achieved by using the following event handlers -

onmouseover="this.style.border='solid 1px #0f0';"
onmouseout="this.style.border='none';"

which have been incorporated into a JavaScript function that loads all the "li" tags on the page and then places borders round them when the mouse hovers over each mapped area.  Click the "Stop Script" button and the CSS will now style the borders once more.