Now we can start adding some interaction to our project. What we want is to expose some controls in the <header>
sidebar that, when clicked, zoom to a defined area of the infographic.
To achieve this, we are going to take advantage of a new CSS3 pseudo-selector: :target
. It gets activated when an anchor becomes the target of the current URL. Let's create a small example to try this out:
<!doctype html> <html> <head> <meta charset="utf8"> <title> :target test</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.0/build/cssreset/ cssreset-min.css"> <style> a[id]{ display: block; width: 100px; height: 100px; text-align: center; line-height: 100px; margin: 10px; background: gray; } a:target{ background: yellow; } </style> <script src="js/prefixfree.js"></script> </head>...