JavaScript Samples: Image Map (with Expansion Set)

The JavaScript Function

Place the following JavaScript into the <head> of your web page:

<script type="text/javascript">
function writeText(txt, imgsrc, imgalt)
 var WinText = '<div><img src="' + imgsrc + '" alt="';
 WinText += imgalt + '" /></div>';

 document.getElementById("desc").innerHTML = txt;
 document.getElementById("window").innerHTML = WinText;

The Image itself

Place your image in a <div> tag on your page like so:

<img src="TheBrain.jpg" alt="Picture of a Human Brain" width="513px" height="303px" usemap="#BrainMap" />

Note: you will need the usemap attribute to create your image “hot spots”

The Image Map

<map id="BrainMap">
<area shape="circle" coords="181,237,33" alt="Cerebellum" onMouseOver="writeText('The cerebellum takes care of the automatic functions of the body, like balance, breathing, etc.', 'cerebellum.jpg', 'image of the cerebellum')" />
<area shape="rect" coords="0,0,100, 100" alt="test" onMouseOver="writeText('Test area (51)', 'alien.png', 'alien picture')" />

The onMouseOver attribute calls the JavaScript function (writeText()).

The area that displays information

<p id="desc"></p>
<div id="window"><p>No Image Here</p></div>

Note: the <p id=”desc”></p> tag will display text, and the <div id=”window”></div> will display your image. You can put either tag in any order.