Toggling Images and Text in Internet Explorer - Page 8

First Things First: This is a tutorial dealing with DHTML. You need to be running an Internet Explorer browser, 4.0 level or better, to see the effect.

You can find this tutorial, and all of its examples, online at http://www.htmlgoodies.com/beyond/toggle.html.
You can download just the examples at http://www.htmlgoodies.com/wpg/.

This tutorial is basically a DHTML session. What I'm going to show you here is how to make a division appear and disappear in MSIE. I also have a sister tutorial to this one that teaches you how to make a layer appear and disappear in Netscape Navigator. It's covered in the next section, "Toggling Netscape's Layers." The effect is the same, but all the commands that do the trick are different, so multiple companies have a hand in the process. Basically, this means that I'm about to get a bunch of letters that tell me that this effect is actually called "visibility", "layering," or "Steve."

The truth is because the MSIE and Navigator browsers are moving in such different directions, it's hard to create one definitive statement that covers the effect. In one of my computer books, the author refers to making a layer appear and disappear as "toggling." I thought was as good a term as any.

But no matter what you name it-the effect will still be as sweet (to paraphrase Bill Shakespeare-I'm a cultured man you know) .

Toggling with MSIE

In Microsoft Internet Explorer, you get the effect through DHTML commands. Now remember that these commands are only supported in IE 4.0 and above and are not supported in Navigator (as of 10/20/01). So when you set up this effect, make sure that the users are running IE 4 or better. You can do that through setting up a browser detect script. If you don't, errors fly all over the place. This is a good one to make sure that your people are prepared for.

Look carefully at Figures 3.19 - 3.21. The effects are demonstrated here.

Figure 3.19 enlargement

Notice that my pointer is off the text "Hey Man!".

Figure 3.20 enlargement

Now the pointer is on top of the text, and the box popped up.

Figure 3.21 enlargement

I've gotten the box to pop up now by using the button. Notice that the other button will take it away.

It's not that difficult of an effect either. Basically what's happening is that I have positioned a division on the page. In that division, I put a table cell with the words "How About This?" inside, but just about anything can be put in the division.

Here's the entire script (I break it apart just after the listing):

<script language="JavaScript">
function ShowIt()
{
document.body.insertAdjacentHTML('BeforeEnd', 
'<DIV STYLE="position:absolute; TOP:35px; LEFT:410px" 
ID="TheTip"><TABLE BORDER="1" CELLPADDING="3">
<TD BGCOLOR="ff00ff">How About This?</TD></TABLE></DIV>');
}
function LoseIt()
{
TheTip.innerHTML = " ";
TheTip.outerHTML = " ";
}
</script>

<center><a href="http://www.htmlgoodies.com" onMouseOver="ShowIt()" 
onMouseOut="LoseIt()">Hey Man!</A>
</center>
<P> <P>
<FORM>
<INPUT TYPE="button" Value="let me See It" onClick="ShowIt()">
<INPUT TYPE="button" Value="OK, Take It Away" onClick="LoseIt()">
</FORM>

<center><a href="http://www.htmlgoodies.com" onMouseOver="ShowIt()" 
onMouseOut="LoseIt()">Hey Man!</A>
</center>
<P> <P>
<FORM>
<INPUT TYPE="button" Value="let me See It" onClick="ShowIt()">
<INPUT TYPE="button" Value="OK, Take It Away" onClick="LoseIt()">
</FORM>

Internet Explorer Wave Filters - Page 7
Beyond HTML Goodies
Make the Division Appear - Page 9