Summertime, and the DHTML Is Easy

Michael Wallent
Lead Program Manager, DHTML
Microsoft Corporation

August 17, 1998

The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "DHTML Dude" column.

Summer seems to bring out the Faulkner in people. It's a languid time, a time of slow conversations, long letters, and mint juleps. The letters of summer were always memorable for me. I remember as a mere tot going to the mailbox to see what new bounty the blue-gray mailman had for me. Ah, the anticipation of another hand-written missive from afar. Unfortunately, I had no friends, so I got NOTHING! But now, as the DHTML Dude, my mailbox runneth over. Last month, I asked for your favorite DHTML sites, and promised to post them here with glowing praise for the best, and maybe some Dude paraphernalia. I'll also answer some of the questions that have backed up.

One of the common threads that runs through my columns on DHTML is the idea that DHTML is more than just "Sliding Stuff" -- it's a new platform, and a new paradigm for building powerful applications on the Web. That is not to say that sliding stuff isn't cool. After all, I did write Dynam ic Asteroids for DHTML after all -- and that's nothing but a bunch of sliding stuff.

In any case, I'm personally excited when I see a site that takes advantage of DHTML as a platform. In the mailbag this month was just such a site, one that exploits one of the key features of Internet Explorer 4.0 and 5.0: data binding.

The builders of the Myriad Voices site (http://www.myriadvoices.com/) have a bounty of interesting information about DHTML and how it can be used. Their New York restaurant finder uses data binding to help find and filter over 2,000 restaurant choices. Great site, and great use of DHTML.

Here are some other noteworthy DHTML sites:

CyberCentre Network (http://members.xoom.com/andle/) has some really interesting animations, all done with text and filters -- excellent low-bandwidth effects.

If you are a fan of the National Basketball Association's Golden State Warriors, and use Internet Explorer 4.0, the Golden State Warriors fan site (http://www.geocities.com/~4warriors/) is for you. This unofficial, fan-created site makes excellent use of conditional display to show large amounts of information in an easy-to-use manner.

Lone Pine Software's site (http://www.lpsoft.com/dhtml/intro.html) has a special DHTML Dude animation.

Thanks to everyone who sent me a link. I spent an enjoyable Saturday browsing all of your DHTML goodies.

Danger: Dude Rant Ahead

<rant>

Before I get into your questions, I've got a little Dude Rant I need to get off my chest. It has to do with the document.all collection, and accessing elements in script. When you have an element with an ID on your page, such as

<div id=MyDiv>This is a
Div</div>

the most efficient way to access it in script is to simply refer to the ID directly:

<script language=JScript>
MyDiv.style.color = 'blue';
</script>

Quite often, I see DHTML programmers doing the following:

document.all.MyDiv.style.color = 'blue';

or even worse:

document.all["MyDiv"].style.color =
'blue';

There is no need to do this. It's slower than simply referring to the element directly. You are making your pages 34 bytes bigger every time you access an element in this way.

Another problem can be found with event handlers. The following is a chunk of code that can be commonly found on the Web:

<div id=MyDiv
onclick="doClick('MyDiv')">This is a div</div>
<script language="JScript">
function doClick(aName) {
   var e;
   e = document.all[aName];
   alert('Click');
}
</script>

Essentially, when this code is run, the doClick handler creates a string, and passes it to the function, which then looks up the element by ID in the all collection. This has way too many steps. Here is the code rewritten without this problem:

<div id=MyDiv
onclick="doClick()">This is a div</div>
<script language="JScript">
function doClick(aName) {
   var e;
   e = window.event.srcElement;
   alert('Click');
}
</script>

There is a special object on the window called event. This object has a variable called "srcElement", which contains the element that the event actually was fired on. This is a much simpler way to get the originator of the event.

Often, especially when you are creating a clickable area or one that can be moused over, and the area contains rich HTML content, the window.event.srcElement property isn't quite what you want. For example:

<div id=MyDiv
onclick="doClick()">
<b>I'll be bold</b> and clickable</div>
<script language="JScript">
function doClick() {
  var e;
  e = window.event.srcElement;
  e.style.backgroundColor = "blue";
}
</script>

This code seems to want to create an effect where if you click anywhere in the <DIV>, it will turn blue. However, it has a subtle problem. If the user clicks on the bold text, the window.event.srcElement property will not be the <DIV>, but the <B>tag. This will cause just the bold text to have a blue background. What really needs to happen is that if the click occurs anywhere in the <DIV>, and to any element within the <DIV>, turn the <DIV> blue. The following code creates just that effect:

<div id=MyDiv
onclick="doClick(this)">
<b>I'll be bold</b> and clickable</div>
<script language="JScript">
function doClick(e) {
  e.style.backgroundColor = "blue";
}
</script>

Notice that in this example, the onclick handler passes the "this" pointer to the function. The "this" variable holds a reference to the element that the event handler is declared on -- in this case "MyDiv". This code will now cause the whole <DIV>to turn blue, no matter where the click happens inside of it.

</rant>

On to Your DHTML Questions

Dear Dude:

I'd like to use mouseover effects on images on my page. As they move their mouse over an image, it will change, and then change back when the mouse moves off. The problem I'm having is that when the images switch, they first display the little "Downloading" icon. How do I prevent this?

J.S.

The Dude Answers: This is a common problem, J.S, for all types of image switching. In order to get a seamless switch between two images, you want to keep both images in memory. If you have two images that will show up in one area, do the following:

<script language="JScript">
var cache1, cache2;
cache1 = new Image();
cache1.src = "image1normal.gif";
cache2 = new Image();
cache2.src = "image1over.gif";
</script>

You need to create and retain a global variable for each image you want to keep cached. Then, in your image-swapping code, just refer to the image source as you normally would. Here's an example of my image-swapping code; note how I use expando properties and event bubbling to make the code simpler. Note also that when image swapping, be sure you set the height and width for the images, or your page may flash as the images swap.

<script language="JScript">
var cache1, cache2;
cache1 = new Image();
cache1.src = "image1normal.gif";
cache2 = new Image();
cache2.src = "image1over.gif";
cache3 = new Image();
cache3.src = "image2normal.gif";
cache4 = new Image();
cache4.src = "image2over.gif";
function doOver() {
  var e;
  e = window.event.srcElement;
  if (e.tagName == "IMG") {
     e.src = e.oversrc;
  }
}
function doOut() {
  var e;
  e = window.event.srcElement;
  if (e.tagName == "IMG") {
     e.src = e.normsrc;
  }
}
</script>
<span onmouseover="doOver()"
onmouseout="doOut()">
<img height=20 width=20 src="image1normal.gif"
 oversrc="image1over.gif"
normsrc="image1normal.gif">
<img height=20 width=20 src="image2normal.gif"
 oversrc="image2over.gif"
normsrc="image2normal.gif">

Dear Dude:

I am new to the MSDN Online . The DHTML information that is provided is great for those who are already accustomed to advanced HTML. Can you recommend any books on the subject? I would like to learn all about DHTML from the ground up. I know some basic HTML and have just ordered a book on JavaScript, but I have yet to see a good book on DHTML that's for beginners. I find it easier to learn from a book and not from reading articles on my computer. I can take a book or magazine to work with me but I don't think that my computer will fit in my back pocket :-)

C.H.

The Dude Answers: The best introductory DHTML book is Dynamic HTML for Dummies by Michael Hyman, available in the MSDN Online Bookstore . This is a great book that explains DHTML in a fun, easy-to-read way. A Dude favorite.

Dear Dude:

I am wondering how I could create a page that would detect what browser a user is using and then load up an appropriate page for the browser.

Jimmy

The Dude Answers: The following chunk of code does what you ask.

<script language=JavaScript>
function msieversion()
// return Microsoft Internet Explorer (major) version number,
// or 0 for others
// This function works by finding the "MSIE " string and
// extracting the version number
// following the space, up to the decimal point for the
// minor version which is ignored.
{
  var ua = window.navigator.userAgent
  var msie = ua.indexOf ( "MSIE " )
  if ( msie > 0 )
    return parseInt ( ua.substring ( msie+5, ua.indexOf (
".", msie )))
  else
    return 0   // is other browser
}
window.IEVersion = msieversion();
window.RunningAtLeastIE4 = (window.IEVersion >= 4);
window.RunningIE5 = (window.IEVersion >= 5);
</script>

It creates the expando properties on the window to get the version, and booleans for Internet Explorer 4. x , and for Internet Explorer 5. With these booleans, you could write conditional code, or decide to reset your window.location.href to another page that's designed for down-level browsers.

Well, gang, thanks for all the cool DHTML sites and mail. Until next month, this is the document.all.DUDE -- no, wait -- just the Dude.

Michael Wallent is Microsoft's group program manager for DHTML and an exceedingly proud new papa.