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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

any clever ways to add pop up dialog boxex to a map

Status
Not open for further replies.
fpl9250

fpl9250

Programmer
Jan 22, 2007
46
US
Hello,

I need to add some pop up dialog-type boxes to a bunch of dots in a map. They will pop up on mouse-over with information about that dot, like in Google maps. Is there a clever way of doing this? I'm thinking FireFox, but maybe there's an easier way that's easier to maintain such as floating div-tags, or something. Can you all suggest something?

Thank you
 
Sort by date Sort by votes
...I'm thinking FireFox...
Click to expand...
Sounds to me like a great browser - but I don't understand why you have mentioned it in that context.

I would use a mouseover on the dots (which will probably be absolutely positioned block-level elements) to show a div. I would be positioning the popup div absolutely, and re-using the same div for each of the dots on your map.

Let us know how you go.
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
I agree with Jeff on both counts: Why you would mention Firefox as a possible solution? Its a browser, not a Popup Generator, and using hidden divs with a onMouseOver event on the dots.

You could also use CSS and the hover pseudo class, although IE 6 ignores it in anything but links.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Upvote 0 Downvote
Sorry I meant to say, FireWorks. I'll read the rest of the responses now.
 
Upvote 0 Downvote
GUJUm0deL I found the link below to be the most useful. However they have it to call the balloontip with rel=balloon1. I'm putting mine from an image map, and it's not working. Do you know if it needs to be something else instead of a REL when it's being called from an image map?

Thanks

 
Upvote 0 Downvote
This worked for me.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript" src="balloontip.js">
</script>
</head>

<body>

<img src="a.jpg" width="466" height="289" border="0" usemap="#Map">
<map name="Map">
  <a rel="balloon3"><area shape="rect" coords="296,244,400,275" href="#"></a>
  <a rel="balloon4"><area shape="rect" coords="252,173,349,205" href="#"></a>
  <a rel="balloon5"><area shape="rect" coords="367,169,449,205" href="#"></a>
</map>

<div id="balloon3" class="balloonstyle">3 - Learn More</div>
<div id="balloon4" class="balloonstyle">4 - 5.99</div>
<div id="balloon5" class="balloonstyle">5 - 7.49</div>

</body>
</html>

____________________________________
Just Imagine.
 
Upvote 0 Downvote
Thanks for your reply. It now shows the tool tip but not anywhere near the area mapped. It actually shows it at the bottom of the picture. The map is somewhere in the middle of the picture.

Does it work 100% for you?

Thanks
 
Upvote 0 Downvote
GUJUm0deL when you do what you suggest above, does the tool tip show up over the are you mouse over or at the bottom of the image? Mine shows up at the bottom of the image.

Thanks
 
Upvote 0 Downvote
At the bottom of the page, you may have to look at the JS file make some modification to accommodate your situation. if I have time today, I will look at the JS file and test.

____________________________________
Just Imagine.
 
Upvote 0 Downvote
This tool-tip code was designed to show the tool-tip underneath the a href link (see below for an example). But you're situation requires the tool-tip to appear on top of the image. Two different methods. You can either search for another tool-tip example, OR post this question in the JS forum for help on tweaking the JS function to work as you need.

The bottom example should illustrate the difference between using an <a href> and a <img> to call the tol-tip.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<script type="text/javascript" src="balloontip.js"></script>

<link rel="stylesheet" href="balloontip.css">
</head>

<body>

<img src="a.jpg" width="466" height="289" border="0" usemap="#Map">
<map name="Map">
  <a rel="balloon3"><area shape="rect" coords="296,244,400,275" href="#"></a>
  <a rel="balloon4"><area shape="rect" coords="252,173,349,205" href="#"></a>
  <a rel="balloon5"><area shape="rect" coords="367,169,449,205" href="#"></a>
</map>

<div id="balloon3" class="balloonstyle">3 - Learn More</div>
<div id="balloon4" class="balloonstyle">4 - 5.99</div>
<div id="balloon5" class="balloonstyle">5 - 7.49</div>

<p>&nbsp;</p><p>&nbsp;</p>

<a href="" rel="balloon6">some link</a>&nbsp;|&nbsp;<a href="" rel="balloon7">some other link</a>
<div id="balloon6" class="balloonstyle">6</div>
<div id="balloon7" class="balloonstyle">7</div>
</body>
</html>

____________________________________
Just Imagine.
 
Upvote 0 Downvote
I also found this (which looks like what you need): - but, can't find the dl link. Contact the poster for additional info.

- has the tool-tip function for a MAP; but you may have to play around to get the images in it. Mouse over each of the cue balls and see a diff tool-tip.

____________________________________
Just Imagine.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
788
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
411
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
822
Chris Miller
Chris Miller
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
397
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
135
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top