Basics - How to open/close window?

[deko]

I'm new to JavaScript, but would like to include some basic functionality on
a web page. Any help is appreciated.

I use Dreamweaver MX and want to call a simple JavaScript function
onMouseOver on a hotspot in an image. When the user mouses over the
hotspot, a window opens; and when he mouses out, the window closes. There
are several hotspots in the image, and each one needs to have different text
associated with it. So each hotspot brings up a window with different
text - sort of like the Alt tag, or a tool tip. Is this very complicated to
code?

Thanks in advance.

[Andrew Thompson]

On Sun, 08 Aug 2004 13:38:46 GMT, deko wrote:

..So each hotspot brings up a window with different
text - sort of like the Alt tag, or a tool tip.
Pop-ups?
..Is this very complicated to
code?

Probably not, but it is even easier to
prevent, either intentionally and accidentally.

I have probably dealt with 4 cases in the last
3 days of new windows (Java applets, Javascript,
and HTML) not popping up correctly or at all,
that came back to a pop-up blocker ..usually
one that the poster had no idea was the problem,
even if the blocker was *telling* them so in
a little icon.

Pop-ups are going the way of the DoDo,
and web developers need to start thinking
around them.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[deko]

> Pop-ups are going the way of the DoDo,

and web developers need to start thinking
around them.

Good point. I think a better solution may be showing/hiding css layers with
a z-index. I should have enough control with a div to do what I need. One
problem that I'm experiencing in beta testing is that Layers seem to be
unsocial - they don't like other divs around them.

Here are the proposed Layers that will be shown/hidden
onMouseOver/onMouseOut:

<div id="layer01" style="position:absolute; left:144px; top ... [code
omitted]</div>
<div id="layer02" style="position:absolute; left:320px; top ... [code
omitted]</div>
[and so on for about 30 layers]

Here is the image/hotspot/map:

<img src="images/bigImage.gif" name="bigImage" width="760" height="520"
border="0" usemap="#bigImage">

<map name="oxpmainform14">

<area shape="rect" coords="28,54,52,411" href="#"
onMouseOver="MM_showHideLayers('layer01','','show' );MM_setTextOfLayer('text
for layer01')" onMouseOut="MM_showHideLayers('layer01','','hide') ">

[required JavaScript is generated nicely by Dreamweaver]

<area shape="rect" coords="226,185,474,237" href="#"
onMouseOver="MM_showHideLayers('layer02','','show' );MM_setTextOfLayer('text
for layer02')" onMouseOut="MM_showHideLayers('layer02','','hide') ">

<area shape="rect" coords="58,460,218,479" href="#" alt="" >
<area shape="rect" coords="264,45,481,55" href="#" alt="" >
[and so on for about 30 hotspots]
</map>

Okay, that works - but what about my external style sheet? I have several
other divs that are used in the page above and below the bigImage. The
problem is when I try to put a div id above the Layers, or try to put the
Layers inside a parent div - then my behaviors don't work. Why is this
happening?

<div id="bodyContent"> <== this screws up behaviors when placed above
Layers

<div id="layer01" style="position:absolute; left:144px; top ... [code
omitted]</div>
<div id="layer02" style="position:absolute; left:320px; top ... [code
omitted]</div>
[and so on for about 30 layers]

....