JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,027 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,217 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Using JS With Image Maps

Using JS With Image Maps, Creating dynamic image maps.

Options

kewlkreator
Group Icon

1 Aug, 2009 - 08:39 AM

Post #1

Image Maps w/ JavaScript
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.

CODE

<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:

CODE

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.

CODE

All together:

CODE

<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>

Register to Make This Ad Go Away!

firebolt

2 Aug, 2009 - 04:11 AM

Post #2

This would do better with a little more explanation, especially on why you have chosen this method, rather than another.

kewlkreator
Group Icon

2 Aug, 2009 - 04:20 AM

Post #3

QUOTE(firebolt @ 2 Aug, 2009 - 04:11 AM)

This would do better with a little more explanation, especially on why you have chosen this method, rather than another.

Thank you. What other methods are there though? This is the only one I know of.

gregwhitworth
Group Icon

7 Aug, 2009 - 08:41 PM

Post #4

QUOTE

Thank you. What other methods are there though? This is the only one I know of.

Flash could easily be used for such a project, and I HATE and LOATH image maps. Talk about cluttering and messing with your code. But, they do have their place, granted most developers don't give it credence any longer - but it still exists.

I think the most important aspect of this is to show a working example, the code is there and that would make it easier for the user to know whether they even need to use this strategy. Good work though kewl.

--

Greg