O'Reilly logo

Inkscape 0.48 Illustrator's Cookbook by Mihaela Jurković, Rigel Di Scala

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required