Posted 01 August 2009 - 09:39 AM
Please note that this tutorial requires basic knowlege of HTML and Javascript
In this tutorial, we'll create an image map of our solar system. When the viewer hovers over a planet, the paragraph at the bottom will read a description.
Start with our layout.
<html> <head> <title>Image Map</title> <script> // Code </script> <body> <img src="solarsys.gif" usemap="#planets" /> <map name="planets"> <area shape="rect" coords="0,0,82,126" href="sun.html" /> <area shape="circle" coords="90,58,3" href="mercury.html" /> <area shape="circle" coords="124,58,8" href="venus.html" /> </map> <p id="description"></p> </body> </html>
This creates our template. Now, we need a function that writes text to the description box. We'll use:
function writeDesc(text) {
var box = document.getElementById(description);
box.innerHTML=text;
}
Now since we want users to hover over planets, we'll call the function with a onmouseover event.
<area shape ="circle" coords ="90,58,3" onmouseover="writeDesc('Mercury')" href="mercury.html" />
All together:
<html>
<head>
<title>Image Map</title>
<script>
function writeDesc(text) {
var box = document.getElementById(description);
box.innerHTML=text;
}
</script>
<body>
<img src="solarsys.gif" usemap="#planets" />
<map name="planets">
<area shape="rect" coords="0,0,82,126" href="sun.html" onmouseover="writeDesc('Sun')" />
<area shape="circle" coords="90,58,3" href="mercury.html" onmouseover="writeDesc('Mercury')" />
<area shape="circle" coords="124,58,8" href="venus.html" onmouseover="writeDesc('Venus')" />
</map>
<p id="description"></p>
</body>
</html>
MultiQuote
| 