Implementing DHTML in WebExpress

 

 Rollover script:  (for demo click here)

Currently in WebX:

To make this easier in WebX:

The rollover script requires the scripts preload (preload.js), rollover (rollover.js), and event handlers (onmouseover, onmouseout) to be added to the HTML.

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: rollover.js

* The rollover 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 'rollover.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>");
       //-->
</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
Click OK
F5
Create the link
Click the 'Extensions' button
Click 'Add'
Add the following:
Name: onmouseover
Value: changeimg ('name');
Name: onmouseout
Value: changeback ('name');

 

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

In the 'Create/Edit Link' dialog there could be a 'Set Mouseover' button which opens a dialog showing the 'on' and 'off' images.  If the 'on' image does not exist the window could show a message "The image 'linkson.gif' does not exist"
It would be nice to have a 'Do you want to create it?' option which would add a shadow or a glow effect.

If / when both images exist WebX could create the onmouseover and onmouseout tags:

onmouseover = changeimg ('name');
onmouseout = changeback ('name'); 

 

 

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

The images must be in the same directory as the HTML files for the 'preload.js' script to work.  To get around this you could dynamically create the preload script.

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

When the 'name' is sent to the script it must be a string variable.  You cannot call the function by doing this: changeimg (name);  it must be: changimg ('name');

The on and off images must have the same extension.

 

function changeimg(name)
// changes image to image + -on- 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 + 'on' + '.' + nw[nwl] + '"');
}

function changeback(name)
{
var nw = eval ('document.' + name + '.src.split(".")');
nwl = nw.length - 1;
eval ('document.' + name + '.src ="' + name + '.' + nw[nwl] + '"');
}

>>