Basics - How to open/close window?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • deko

    Basics - How to open/close window?

    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

    #2
    Re: Basics - How to open/close window?

    On Sun, 08 Aug 2004 13:38:46 GMT, deko wrote:
    [color=blue]
    > ..So each hotspot brings up a window with different
    > text - sort of like the Alt tag, or a tool tip.[/color]

    Pop-ups?
    [color=blue]
    >..Is this very complicated to
    > code?[/color]

    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

    Comment

    • deko

      #3
      Re: Basics - How to open/close window?

      > Pop-ups are going the way of the DoDo,[color=blue]
      > and web developers need to start thinking
      > around them.[/color]

      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="#bigIma ge">

      <map name="oxpmainfo rm14">

      <area shape="rect" coords="28,54,5 2,411" href="#"
      onMouseOver="MM _showHideLayers ('layer01','',' show');MM_setTe xtOfLayer('text
      for layer01')" onMouseOut="MM_ showHideLayers( 'layer01','','h ide')">

      [required JavaScript is generated nicely by Dreamweaver]

      <area shape="rect" coords="226,185 ,474,237" href="#"
      onMouseOver="MM _showHideLayers ('layer02','',' show');MM_setTe xtOfLayer('text
      for layer02')" onMouseOut="MM_ showHideLayers( 'layer02','','h ide')">

      <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]

      ....


      Comment

      Working...