Inside Technique : Introduction : The Second Example

Let's go over a more complicated sample. This context menu item will fade out whatever image was clicked on, or fade up all images that are hidden. While less useful than the last example, it demonstrates the "event" object and transition filters, and is almost fun to use.

First comes the registry information in the registry file, called "img_hide.reg":

REGEDIT4

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\&Hide Image]
@="c:\\windows\\web\\img_hide.htm"
"contexts"=hex:02

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\Show &Hidden Images]
@="c:\\windows\\web\\img_hide.htm"
"contexts"=hex:21

Notice that this context menu is actually listed twice; one version called "Hide Image" is for images only, and another called "Show Hidden Images" shows in the default and link menus. There are two good reasons for this.

This first is a design issue: how is a person who has just hidden a picture supposed to get it back? The image is no longer selectable, and forcing people to hit the "Refresh" button is a bad idea. The obvious answer is to include a second menu for the default context menu, which brings back every hidden image. This entry is also on the link menu because many images are used within links, and it's only natural to click where the image was.

The second reason is educational. You should have noticed from the registry file that both menus use the same script file. That means the script has to determine the context it's being called in, then act appropriately. This is much more interesting than using two files.

The script file, called "img_hide.htm" and located in "C:\WINDOWS\WEB", is as follows:

<SCRIPT LANGUAGE="javascript1.2">
// Fades out the clicked-on image, or fades up all hidden images
// original code by HJ Hornbeck

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

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;
     }

if ( Img.tagName == 'IMG' ) {

  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();
     }
else
  for ( var count = 0; count < ExtDoc.images.length; count++ )
    if ( ExtDoc.images[count].style.visibility == 'hidden' ) {
      if ( !ExtDoc.images[count].filters.blendTrans )
        ExtDoc.images[count].style.filter += ' blendTrans(duration=1)';
      ExtDoc.images[count].filters.blendTrans.apply();
      ExtDoc.images[count].style.visibility = 'visible';
      ExtDoc.images[count].filters.blendTrans.play();
    }
</SCRIPT>

Now to examine this script one part at a time.

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