Re: How Do They Do That

At 09:11 10/07/02 -0700, Ray Henderson wrote:
>I have seen sites (almost always professionally
>done)  which,  when the cursor is placed
>over links (usually menu options)  a small pop-up
>window  appears.  This small window usually
>displays something along the line of a sub menu,
>or possibly a description of what is available if
>that main menu option is selected.
>
>How do thay do that??    I assume it's some sort
>of JavaScript thing but am not sure.

Its done using JavaScript and CSS.

Assuming you are just using a recent browser, it can be done very easily.

In the HTML:

<.a href="foo.html" onmouseover="showdiv()">Foo<./a>

<.div id="hiddendiv">
popup text here
<./div>

In the CSS:

div#hiddendiv {
         visibility: hidden;   /* hides the div */
         position: absolute; /* positions it */
         left: 100px;
         top: 20px;
         width: 100px;       /* give it a width */
}

In the JavaScript:

function showdiv() {
         document.getElementById('hiddendiv').style.visibility = "visible"
}

You can also do this by using style.display. Examples of both techniques 
are shown on

http://aamcf.co.uk/temp/hidingtext and http://aamcf.co.uk/temp/popup

Of course it's not as simple as that. There are other issues to consider

         o What will happen when the browser doesn't have JavaScript turned on?
         o Is this accessible to a wide range of users?
         o What about older browsers?

All of these can be overcome. But it's near my bedtime, so I'll not talk 
about them now.

Andrew

--
http://aamcf.co.uk/

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA