Several people asked me for tutorials on CSS and web coding. I’ve decided to publish practical examples in web development, done with css, semantic, accessible and stric xhtml, working in the highest number of browsers as possible without hacks and, of course, valid.

Map with highlight on hover

Lots of websites require a geographic area selection. Not only useful for that matter, usually maps add great aesthetic value to a website.

Creating maps with semantic xhtml and not in Flash, accessibility is highly increased and Google (such as other search engines) will be able to spider all your website without problems. In the case you create, for example, an Europe map for country selection, you could even alphabetically order the contry <li>s and would result of great utility in text/voice mode browsers.

Under Windows, it has been also tested in Maxthon 1.6 and 2.1, working correctly if not zoomed (in that case the areas get displaced). In IE 5.5 doesn’t loose its functionality, but the areas are not highlighted (this is a problem with IE 5.5 and strict xhtml).