For a menu item:
HTML Code:
<span onmouseOver="this.style.background='yellow';mapImg.src='elm_highlight.jpg'" onmouseOut="this.style.background='white'">Elm Street</span>
and for the map:
HTML Code:
<img src="default_map.jpg" name="mapImg">
How you lay these out on your page is up to you, as is the highlight color (here yellow) and color of the unhighlighted text's background (here white). If, instead of a background color highlight, you want the foreground color of the text to change, substitute 'color' for 'background' in the above. If you want 'Elm Street' (the text) to remain highlighted until a different street is selected, skip the onmouseOut statement.
Also, for practical reasons which should become clear when you actually try this out, you might prefer to have the image change onClick rather than onmouseOver. Like this:
HTML Code:
<span>Click below to select Highlighted Map</span><br>
<span onmouseOver="this.style.background='yellow'" onClick="mapImg.src='elm_highlight.jpg'" onmouseOut="this.style.background='white'">Elm Street</span>
Bookmarks