Implementing DHTML in WebExpress


 Switchimg script:  (for demo click here)

Currently in WebX:

To make this easier in WebX:

The switchimg script requires the scripts preload (preload.js), and switchimg (switchimg.js) be added to the HTML.

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

Click the 'Extensions' tab
Name: src
Value: preload.js
Name: src
Value: switchimg.js

* The switchimg script does not 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 'switchimg.js' script is chosen then the 'preload.js' script is added as well.

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>");
For more details:




Click the 'Extensions' button
Click 'Add' 
Add the following:
Name: name
Value: the name of the image minus the extension
Click OK
Create the link
Click the 'Extensions' button
Click 'Add'
Add the following:
Name: onmouseover
Value: switchimg ('name', 'newname.gif');

or you can use 'onclick' or link directly to 'javascript: switchimg ('name', 'newname.gif');'



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

In the 'Create/Edit Link' dialog there could be a 'Set Switch' button which opens the 'Switch' dialog.  This will allow you to set the 'newname.gif' image, the event handler and also which image changes.  (It's not necessarily going to be the one with the link...)

If / when both images exist WebX could create the appropriate tags:

onmouseover = switchimg ('name', 'newname.gif');
onmouseout = switchimg ('name', 'originalname.gif');
onclick = switchimg ('name', 'newname.gif');


*if 'onclick' handler is used you will need to set the link to: 'javascript: void(0);'

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

The new image must be in the same directory as the old one. 
The 'name' of the image does not and should not change with the image name. This could cause a conflict if WebExpress is dynamically reading the image's name like in the 'linkstate.js' script.

function switchimg(name, newname)
// changes image -name- to image -newname- 
// -name- should be set in HTML to image name sans extension
// -newname- should include extension
eval ('document.' + name + '.src = "' + newname + '"');