Friday 17 June 2016

Task 32 and 33

Here are some image maps.



This image map takes you to close up pictures of the planets when the planets are clicked on.

The code:

<!DOCTYPE html>
<html>
<body>
<p>Click on the planets to see close up pictures of each planet.</p>
<img src="http://www.planetsforkids.org/images/planets_image.jpg" width="622" height="287" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="99,919,20,280" alt="Mercury" href="http://www.fvalk.com/images/Space/Mercury/MERCURY2_MARINER10_BIG.GIF">
  <area shape="rect" coords="140,167,170,193" alt="Venus" href="http://fullhdpictures.com/wp-content/uploads/2016/04/Venus-Desktop.jpg">
  <area shape="rect" coords="186,142,221,170" alt="Earth" href="https://static.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg">
</map>
  <area shape="rect" coords="222,113,248,135" alt="Mars" href="http://media.salon.com/2015/09/mars-614x412.jpg">
</map>
  <area shape="rect" coords="280,106,354,166" alt="Jupiter" href="http://svs.gsfc.nasa.gov/vis/a010000/a012000/a012021/JupiterThumbnailSmall.png">
  <area shape="rect" coords="354,64,447,133" alt="Saturn" href="http://apod.nasa.gov/apod/image/0412/saturn_malmerCassini_5m.jpg">
  <area shape="rect" coords="437,42,622,287" alt="Uranus" href="http://space-facts.com/wp-content/uploads/uranus.jpg">
  <area shape="rect" coords="491,15,536,52" alt="Neptune" href="http://ste.india.com/sites/default/files/2015/12/16/442079-neptune.jpg">
  <area shape="rect" coords="247,3,622,287" alt="Pluto" href="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/07/14/pluto_color_beforeclosestapproach.jpg.CROP.original-original.jpg">
</map>
</body>
</html>


This image map will take you each of the planets Wikipedia pages when the planets are clicked on.

The code:

<!DOCTYPE html>
<html>
<body>
<p>Click on the planets to go to the wikipedia page for each planet.</p>
<img src="http://www.planetsforkids.org/images/planets_image.jpg" width="622" height="287" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="99,919,20,280" alt="Mercury" href="https://en.wikipedia.org/wiki/Mercury_(planet)">
  <area shape="rect" coords="140,167,170,193" alt="Venus" href="https://en.wikipedia.org/wiki/Venus">
  <area shape="rect" coords="186,142,221,170" alt="Earth" href="https://en.wikipedia.org/wiki/Earth">
</map>
  <area shape="rect" coords="222,113,248,135" alt="Mars" href="https://en.wikipedia.org/wiki/Mars">
</map>
  <area shape="rect" coords="280,106,354,166" alt="Jupiter" href="https://en.wikipedia.org/wiki/Jupiter">
  <area shape="rect" coords="354,64,447,133" alt="Saturn" href="https://en.wikipedia.org/wiki/Saturn">
  <area shape="rect" coords="437,42,622,287" alt="Uranus" href="https://en.wikipedia.org/wiki/Uranus">
  <area shape="rect" coords="491,15,536,52" alt="Neptune" href="https://en.wikipedia.org/wiki/Neptune">
  <area shape="rect" coords="247,3,622,287" alt="Pluto" href="https://en.wikipedia.org/wiki/Pluto">
</map>
</body>
</html>

No comments:

Post a Comment