Implementing DHTML in WebExpress

 

Linkstate script:  (for demo click here)

Currently in WebX:

To make this easier in WebX:

The linkstate script requires the scripts, detect (detect.js), preload (preload.js), linkstate (linkstate.js).

To do this manually you must first insert the calls to the scripts:

Insert>Script
Click the 'Extensions' tab
Name: src
Value: preload.js
Name: src
Value: linkstate.js

The detect.js script should be pasted into the header.

* The linkstate script does require a browser detect.

 

Add a dialog for 'Import Scripts' with a browse button which goes to a dedicated 'scripts' directory.  (or a list of scripts to choose from...or a pulldown...)

The web site manager should register these scripts and should copy the scripts into the root directory.

If the 'linkstate.js' script is chosen then the 'preload.js' and 'detect.js' scripts are added as well. 

*the 'detect.js' script should be pasted into the header of the HTML.

I'd suggest 'turning on' other options depending on the script(s) which are imported. 

 

* To be as compatible as possible the <script src = "preload.js"></script> tag should be written out like this:

<SCRIPT LANGUAGE="JavaScript1.2" TYPE='text/javascript'>
       <!--
       document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='preload.js' TYPE='text/javascript'><\/SCR" + "IPT>");
       //-->
</SCRIPT>
For more details: http://webreference.com/dhtml/diner/scriptsrc/

Insert>Image
Click the 'Extensions' button
Click 'Add' 
Add the following:
Name: name
Value: the name of the image minus the extension

Insert>Script
preload ('list of current images');

ex: preload ('homecurrent.gif, linkscurrent.gif, feedbackcurrent.gif');

 

Once the option, Import>Script>linkstate.js, has been chosen WebX should set the 'name' of any image on the page to it's filename minus the extension. 

 

 

Rules/Problems with the 'linkstate.js' script:

The images must be in the same directory as the HTML files for the 'linkstate.js' and 'preload.js' scripts to work.  To get around this you could dynamically create the preload script to create the proper path.  (This would have to be in the script itself...)

The 'name' assigned must be the same as the filename minus the extension.

This script requires the 'detect.js' script.

The script won't work in Netscape unless the "<SCRIPT SRC = "linkstate.js"> tag is at the end of the document.... just before the ending body tag. 

 

function currentimg(name)
// changes image to image + -current- regardless of extension
// -name- should be set in HTML to image name sans extension
{
var nw = eval ('document.' + name + '.src.split(".")');
nwl = nw.length - 1;
eval ('document.' + name + '.src = "' + name + 'current' + '.' + nw[nwl] + '"');
}

if (IE)
 {
  for (names in document.images)
  {
     nw = window.location.href;
     nwv = nw.split("/");
       st = nwv.length-1;
   nwlv = nwv[st].split (".");
     nwlvl = nwlv.length-2;
    if (names == nwlv[nwlvl])
      {
       currentimg (names);
       }
    }
  }
  if (NS)
 {
 for (names in document)
    {
     nw = window.location.href;
     nwv = nw.split("/");
     st = nwv.length-1;
     nwlv = nwv[st].split (".");
     nwlvl = nwlv.length-2;
     if (names == nwlv[nwlvl])
      {
        currentimg (names);
       }
   }
}
if (DOM)
{
 lengthbit = document.getElementsByTagName("img").length;
 for (x=0; x<lengthbit; x++)
    {
      names = document.getElementsByTagName("img").item(x).name;
      nw = window.location.href;
      nwv = nw.split("/");
      st = nwv.length-1;
      nwlv = nwv[st].split (".");
      nwlvl = nwlv.length-2;
      if (names == nwlv[nwlvl])
      {
        currentimg (names);
       }
    }
}

 

>>