/    Sign up×
Community /Pin to ProfileBookmark

map dots

Copy linkTweet thisAlerts:
Dec 14.2007

I want a map and dots that light up when you hover over some text and viceversa.

Any tutorials on this?

Is javascript the right tool or should i use dhtml/flash?
Can i use a map image and have dot images over it, or should the map image be a background?
How do i place the dots? Using div?

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 15.2007 — Use an image map with mouseover to position images

http://www.webdeveloper.com/forum/showpost.php?p=835254&postcount=8
Copy linkTweet thisAlerts:
@fuzzauthorDec 15.2007 — So this allows me to use a single map image and dot images without having to split up the map image?
Copy linkTweet thisAlerts:
@FangDec 15.2007 — Yes
Copy linkTweet thisAlerts:
@fuzzauthorDec 15.2007 — havn't got it working as i want.

i dont see anything, and suddenly a dot appears when i hover over the map.

was thinking if u have a list of planets on the side of the map for instent, and white dots symbolizing planets, then they become red and text lights up when hovering over either the dot or the planet name.
Copy linkTweet thisAlerts:
@FangDec 15.2007 — was thinking if u have a list of planets on the side of the map[/QUOTE]then have the onmouseover events fire from the list
Copy linkTweet thisAlerts:
@fuzzauthorDec 18.2007 — so i have the dots showing when hovering the text, but how do i get the text to change when i hover the dots?

if id like a green state to show, do i simply copy all red code, and change to onmouseout to green? havnt got it to work.

also do you need an area shape for mouseover, couldnt you have it directly on the images?
Copy linkTweet thisAlerts:
@FangDec 18.2007 — do you have a link so we can see what you are doing?
Copy linkTweet thisAlerts:
@fuzzauthorDec 18.2007 — http://www.krogar.info/java.html

when i put the image in the same area as the shape coords i get a flickering problem, any way around it?
Copy linkTweet thisAlerts:
@fuzzauthorDec 24.2007 — i changed the cursor but images still flicker when hovered.

anyone know how to get the text to change when i hover the dots?

[CODE]<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()" href ="mercur.htm" target ="_blank" alt="Mercury">
<area shape ="circle" coords ="104,58,10" onmouseover="placeImage('venus')" onmouseout="placeImage()" href ="venus.htm" target ="_blank" alt="Venus">
</map>
</div>
<A id=planet1 onmouseover="placeImage('mercur')";
onmouseout="placeImage()";
href="mercur.htm">mercur</A>
<br>
<A id=planet2 onmouseover="placeImage('venus')";
onmouseout="placeImage()";
href="venus.htm">venus</A>
[/CODE]

and how do i get images to show when onmouseout? i tried duplcating [I]var red=document.getElementById('red');[/I] etc and [I]<img id="red" src="red.gif" width="16" height="16" alt="red">[/I] and calling them green and have that on onmouseout but didn't work.
×

Success!

Help @fuzz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...