8
edits
Webmakers/Projects/aWorldOfLinks: Difference between revisions
Jump to navigation
Jump to search
Webmakers/Projects/aWorldOfLinks (view source)
Revision as of 08:22, 22 February 2013
, 22 February 2013no edit summary
No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
<p>Alright, our goal is to have a map of the world with each country linking to it's wikipedia page. For bonus points we'll create some kind of effect when you hover over the country. First let's go to the wikimedia commons and look for a suitable svg. This one will do: http://en.wikipedia.org/wiki/File:World_map_-_low_resolution.svg. When you get to the wikipedia page there are all kinds of interesting links and information, but you'll want to click on the image itself, and then right click and pick "View Source." You'll get something like this:</p> | <p>Alright, our goal is to have a map of the world with each country linking to it's wikipedia page. For bonus points we'll create some kind of effect when you hover over the country. First let's go to the wikimedia commons and look for a suitable svg. This one will do: http://en.wikipedia.org/wiki/File:World_map_-_low_resolution.svg. When you get to the wikipedia page there are all kinds of interesting links and information, but you'll want to click on the image itself, and then right click and pick "View Source." You'll get something like this:</p> | ||
<code> | <code> | ||
<?xml version="1.0" encoding="utf-8"?> | <?xml version="1.0" encoding="utf-8"?> | ||
<svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" | <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="950px" height="620px" viewBox="0 0 950 620" xml:space="preserve"> | ||
<path id="papua new guinea" d="M852.76,348.29l-0.37,24.44l3.52-0.19l4.63-5.41l3.89,0.19l2.5,2.24l0.83,6.9l7.96,4.2l2.04-0.75v-2.52l-6.39-5.32l-3.15-7.28l2.5-1.21l-1.85-4.01l-3.7-0.09l-0.93-4.29l-9.81-6.62L852.76,348.29L852.76,348.29z"/> | |||
<path id="egypt" d="M521.93,243.06l2.67,0.07l5.2,1.44l2.47,0.07l3.06-2.56h1.43l2.6,1.44h3.29l0.59-0.04l2.08,5.98l0.59,1.93l0.55,2.89l-0.98,0.72l-1.69-0.85l-1.95-6.36l-1.76-0.13l-0.13,2.16l1.17,3.74l9.37,11.6l0.2,4.98l-2.73,3.15L522.32,273L521.93,243.06L521.93,243.06z"/> | |||
<path id="uganda" d="M538.3,339.09l3.03,2.84l1.9-1.21l5.14-0.84l0.88,0.09l0.33-1.95l2.9-6.1l-2.44-5.08l-<path id="greece" d="M506.71,217.6l-0.11,1.33l4.63,2.33l2.21,0.85l-1.16,1.22l-2.58,0.26l-0.37,1.17l0.89,2.01l2.89,1.54l1.26,0.11l0.16-3.45l1.89-2.28l-5.16-6.1l0.68-2.07l1.21-0.05l1.84,1.48l1.16-0.58l0.37-2.07l5.42,0.05l0.21-3.18l-2.26,1.59l-6.63-0.16l-4.31,2.23L506.71,217.6L506.71,217.6z"/> | |||
</svg> | |||
</svg> | |||
</code> | </code> | ||
<p>If you've worked with HTML the tags (<tag></tag>) will look familiar. The tags <svg> and <path> are paths specific to svg files. The code in those tags creates the shapes of the countries in the map. Conveniently this svg also has id's for each of the paths. We'll be utilizing those in a moment.</p> | <p>If you've worked with HTML the tags (<tag></tag>) will look familiar. The tags <svg> and <path> are paths specific to svg files. The code in those tags creates the shapes of the countries in the map. Conveniently this svg also has id's for each of the paths. We'll be utilizing those in a moment.</p> | ||