City map

FuZzalicious · Dec 30, 2007

I want a map with spots you can hover which will underline the text beside, and hovering the text will change the color of the spot.

Havn't git it working as i want at all:

http://www.krogar.info/java

This is what ive tried:
_________________________________________________________
<script type="text/javascript">
function placeImage(planet)
{
var red=document.getElementById('red');
switch(planet) {
case 'mercur':
red.style.top='90px';
red.style.left='60px';
red.style.display='block';
break;
case 'venus':
red.style.top='60px';
red.style.left='100px';
red.style.display='block';
break;
default:
red.style.display='none';
}
}

</script>

<style type="text/css">
#container {position:relative;}
#red {display:none;position:absolute;top:0;left:0;}
</style>

</head>
<body>
<div id="container" class="krogkarta">
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<img id="red" src="red.gif" width="16" height="16" alt="red">
<map name="planetmap">
<area shape ="circle" coords ="70,98,10" onmouseover="placeImage('mercur')" onmouseout="placeImage('mercur')" href ="mercur.htm" target ="_blank" alt="Mercury">
<area shape ="circle" coords ="104,58,10" onmouseover="placeImage('venus')" onmouseout="placeImage('venus')" href ="venus.htm" target ="_blank" alt="Venus">
</map>
</div>
<A id=planet1 onmouseover="placeImage('mercur')";
onmouseout="placeImage('mercur')";
href="mercur.htm">mercur</A>
<br>
<A id=planet2 onmouseover="placeImage('venus')";
onmouseout="placeImage('venus')";
href="venus.htm">venus</A>
__________________________________________________________

But this only marks 1 spot at a time, dosn't change color or underline the text when hovering spots.

dwarfthrower · Jan 2, 2008

That's because you only call the [tt]placeImage[/tt] function. Which is understandable, because you don't have any other functions to call. Write the functions to do the other things you want - like underline the text. Then write a function that calls all the functions you need called and call that function from your mouseover event handler.

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

City map

FuZzalicious

Programmer

dwarfthrower

Programmer

Similar threads

Part and Inventory Search

Sponsor