Popup Windows ala Google Maps

[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)

 

[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

 

[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