Interactive Graphics
Page 9
World Map - Tap Country
Tap countries on the world map, to see their names. Select nations from a drop down menu. The selected country highlights with a heavy white outline.
Tap any Country
Select a Nation from the Menu
Selected countries highlight with thick white outlines. You may have to zoom in for small countries.
Preparation
Adobe Illustrator, SVG, JavaScript
I traced a public domain world map with Adobe Illustrator paths.
In Illustrator assign each nation
to a layer and give each layer
a short but descriptive name.
With JavaScript extract named layers
and assign click events
to respond for each layer.
When you tap an element, a JavaScript click event displays the name of the country the element represents.
Additonally adrop down menu allows you to select countries by name. Select a list item and the country highlights with bright white outlines on the map. JavaScript provides interaction between the menu selection event and the SVG element.
SVG
Scalable Vector Graphics offer a wide array of features for online content.
Scalable
SVG images scale up and down with near perfect clarity. Well designed SVG graphics display clean, crisp lines and solid areas of color or gradations.
Interactive
Assign JavaScript
events to SVG elements.
For example, tap an element to
trigger a JavaScript click
event.
CSS3
Apply CSS styles and attributes to SVG graphics.
Interactive Graphics
Interactive graphics respond to touch, mouse or tap motion.
2.5D Models
Many examples demonstrate 2.5D
models.
The graphics appear three dimensional.
You can swipe to rotate or view the graphics,
yet they're actually two
dimensional sprite sheets.
Two dimensional sprite sheets render with JavaScript and the HTML5 2D canvas.
HTML5 Graphics Interaction
Image maps and scaleable image maps, react to areas within an image. Picture tags allow developers and designers to display different versions of an image based on screen size or orientation.
JavaScript Interaction
JavaScript includes a long list of event listeners. Window and element event listeners respond to touch movement, taps, mouse movement, window resize events, clipboard, keyboard and form events.
CSS Graphics Interaction
With CSS3 designers can animate properties including location, scale, color and opacity.