Popup Windows ala Google Maps

J

john

All:

Does anyone know how Google creates and displays those pop-up windows
on their maps? For example, if I go to maps.google.com and do a
search, I can mouse-over the results, and an information window pops
up. I see a similar effect on www.tvguide.com when I mouse over TV
shows (the pop-up box gives a summary fo the show).

Is this something that modern Javascript engines provide? Is this
something written in another, lower-level language and somehow
integrated into the browser? How is this accomplished? I would like to
be able to provide a similar feature on my site.

(I'm a long time C/C++/Java programmer and relatively new to
Javascript)

Thank you,
John (jpuopolo)
 
P

Peter Michaux

Hi John,

Does anyone know how Google creates and displays those pop-up windows
on their maps? For example, if I go to maps.google.com and do a
search, I can mouse-over the results, and an information window pops
up. I see a similar effect onwww.tvguide.comwhen I mouse over TV
shows (the pop-up box gives a summary fo the show).

You can get little bits of HTML to show and hide by using a
combination of events and CSS

<div
onmouseover="document.getElementById('popup').style.display='block';"

onmouseout="document.getElementById('popup').style.display='none';>trigger
div</div>
<div id="popup" style="display:none;">popup!</div>

This is a crude implementation. It might be better to add and remove
an HTML class name to the popup element and then style it in CSS where
on style is hidden and one style is shown. This might would allow
easier maintenance.

If you are new to JavaScript I recommend reading Flanagan's book (but
there is errata)

http://jibbering.com/faq/#FAQ3_1

comp.lang.javascript is the best source for technical details.

Peter
 
J

john

Hi John,



You can get little bits of HTML to show and hide by using a
combination of events and CSS

<div
onmouseover="document.getElementById('popup').style.display='block';"

onmouseout="document.getElementById('popup').style.display='none';>trigger
div</div>
<div id="popup" style="display:none;">popup!</div>

This is a crude implementation. It might be better to add and remove
an HTML class name to the popup element and then style it in CSS where
on style is hidden and one style is shown. This might would allow
easier maintenance.

If you are new toJavaScriptI recommend reading Flanagan's book (but
there is errata)

http://jibbering.com/faq/#FAQ3_1

comp.lang.javascriptis the best source for technical details.

Peter

Peter:

Thanks for the answer. I have been programming in C++/Java/C# for many
years and am fascinated by the sophistication of HTML/CSS/DHTML &
Javascript.

Thanks again,
jpuopolo
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top