Although not officially part of the HTML5 specification, Geolocation has become one of a number of new technologies that have recently come to light with advent of HTML5. Remy Sharp and Bruce Lawson also felt it important enough to write a whole chapter about in their brilliant book, Introducing HTML5.

The Geolocation API is used to find the location of your users. You've probably noticed a similar technology on many apps used on smartphones — checking into places through Facebook or Foursquare, for example. The same can be done with most modern web browsers. When used in conjunction with the Google Maps API, you can get some pretty cool results and add some great features to your website or web apps.

It would help if you had a basic understanding of Javascript, jQuery and PHP for this article, but I try to explain everything, so it isn’t essential.

I have always found that there has never been a really simple way of swapping one image for another when you rollover it. We could use CSS and replace our img tags with elements with background images, and use the :hover pseudo-class to switch them round. But then we lose the semantic value of the image — it wouldn't actually appear in our document's hypertext, couldn't be saved, hyperlinked, etc.

Therefore we generally always have to rely on Javascript for this. However, a lot of methods that implement this just seem messy — especially the awful Javascript code (MM_swapImage) that Adobe Dreamweaver generates. My proposed solution is to use jQuery, a clean Javascript code library, as well as using the relatively new HTML5 data-* attributes.