Interactive Graphics
Page 4
USA Tap a State or Button
Tap for State Names
Tap a Button: Find a State
Selected states highlight with thick white outlines
About this Project
The SVG USA map scales up and down with near perfect resolution. Edges don't become blurry, yet you can select individual states for information.
This interactive map's implemented with SVG and JavaScript. Some simple USA map games are in progress.
Preparation
With Adobe Illustrator paths, I traced a public domain bitmap image of the USA. The groups, paths and polygons were saved as an SVG file.
JavaScript accesses SVG and an audio element.
Find States
Tap a state on the map to see the state name. To find a state, highlight the state. Tap a state button.
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.