Inside Technique : Introduction : The Image Hiding

Let's start taking apart the "Hide Image" half:

ExtMen = external.menuArguments;
ExtDoc = ExtMen.document;
Img    = ExtMen.event.srcElement;

All three of these variable definitions are shortcuts to other objects. The first refers to the "window" object of the target web page, and the second refers to the "document" object of that "window" object.

The third points to the object that had a context menu applied to it, via the "event" object. The "event" object contains a lot of properties about the last event that was triggered on a web page. This includes which keys were pressed, where the mouse was and, as used above, the element that was the source of the event. Now that we know what was clicked on, determining what to do becomes much easier.

if ( Img.tagName == 'AREA' )
  for ( var count = 0; count < ExtDoc.images.length; count++ )
    if ( ExtDoc.images[count].useMap == ("#" + Img.parentElement.name) ) {
      Img = ExtDoc.images[count];
      break;
    }

The first block of actual code concerns itself with image maps. When right-clicked, Internet Explorer hands them to the image context menu, but returns an <AREA> HTML element in the "event" object (oddly enough, that <AREA> object is always the first <AREA> tag in an image map, no matter which <AREA> was actually clicked on. See "URL to Clipboard" for a workaround).

If the HTML element in question is an <AREA>, this block changes the shortcut of the <AREA> object to point to the image map's associated image. It is found by looping through all the images in the document, comparing each image's "useMap" attribute to the name of the <AREA>'s parent image map.

if ( Img.tagName == 'IMG' ) {
  if ( ExtDoc.activeElement != 'BODY' )
    ExtDoc.activeElement.blur();
    if ( !Img.filters.blendTrans )
      Img.style.filter += ' blendTrans(duration=1)';
    Img.filters.blendTrans.apply();
    Img.style.visibility = 'hidden';
    Img.filters.blendTrans.play();
}

This section is used if an image was right-clicked on. If the image was inside a link, it has a "selection box" around it; the third line removes it by blurring the page's active element, which should still be that link (the second line prevents a quick mouse movement from accidentally sending the browser window to the back). After that, the code checks if the image has a blend transition filter applied to it, and adds it if needed.

Filters, for those unaware, are an invention of Microsoft, and come in two flavors. The first, usually known just as "filters", add an immediate visual effect to an object. This includes removing all colour, adding a transparency effect, or even giving the object a fake light source. The second type, typically called "transitions", transform an object from one state to another. Some examples include revealing an HTML document with horizontal blinds, changing one image to another via a TV-fuzz look, or (as used here) merely fading an image into the background.

Once added, a transition is easy to start. The beginning state is remembered by calling the "apply()" method of the filter in question ("Img.filters.blendTrans"). Then the element is changed to it's ending state; here we make the image disappear via Cascading Style Sheets. Finally, the transition is triggered by the "play()" method of the filter. The script continues to execute while the transition plays. The duration of the effect is determined by it's CSS definition ("duration=1" translates to a one-second transition).

Don't worry, the rest of the script is easier to understand.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.