A simple but effective implementation of an image with rollovers.
A background image, a map of France in this case, with a div layered over it using absolute positioning to place the race stages.
A listener is added to this class of imgs to swap out the src image on mouseover.
The icky aspect of this is finding the positions and size percentages. To simplify this process I found a bit of code from Emanuele Feronato to output the x and y position of a mouse click relative to an image clicked over. (eg ‘mouse clicked 123 pixels from the left edge of this image, 78 pixels from its top’).
Here’s my version. I modified this to output percentages and set the cursor as crosshairs for accuracy.
User-friendly Bonus Feature: The interactive reads the current date and highlights the appropriate stage of the race.
