Creating an interactive map for a web game

This recipe will show us how to combine vector graphics and JavaScript together, assigning hover and onClick events to SVG elements. We will create a simple introductory page for an imaginary online game, where the player must choose/select one of three kingdoms to start the game. A kingdom can be chosen by clicking on it on the map, or by clicking its coat of arms. Hover effects give the user visual feedback about which kingdom will be selected if the mouse button is clicked.

The drawing will be created in Inkscape, saved in the Plain SVG format, embedded into an HTML page, and animated with JavaScript. This recipe will show us how easy it is to create an attractive presentation to an interactive web game.

Getting ready

In order to easily bring JavaScript powered interactivity across all browser platforms, we will use the popular JQuery framework.

JQuery can be downloaded from the official Web site: http://www.jquery.com.

We will also use an additional...