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:
* 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:
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');
Rules/Problems with the 'switchimg.js' script:
The new image must be in the same directory as the old one.
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 + '"');