How to do a Rollover Image button

[When using Server-Side object model...]
Making a DTC button show an image is easy - but to make it do a rollover (when the image changes when the mouse hovers over it) needs some extra work.

I have prevously used the advise method...
pbSave.advise "onmouseover","dummy()"
pbSave.advise "onmouseout","dummy()"

then trap these events in the clientEvent handler:
function thisPage_onbeforeserverevent(i_strObject, i_strEvent) {
if (i_strEvent == "onmouseover") {
if (i_strObject == "pbSave") {
//highlight button with rollover image
<<do a swap image routine>>
}
thisPage.cancelEvent=true;
} else if (i_strEvent == "onmouseout") {
//restore original image
<<do a restore image routine>>
thisPage.cancelEvent = true;
}
}

I used the Macromedia routines MM_swapImage and MM_swapImgRestore to do the image handling.

But now I have enhanced to button DTC code to provide a very simple rollover feature. Now the only code that the page developer needs to add is a single line in the thisPage_onenter() event...

pbSave.rollover_src = "../images/blaa.gif";

To achieve this, you will need to adjust the _scriptLibrary/BUTTON.ASP code as follows:

1. Add the new rollover_src property to the _BTN__Prototype method...

// public members
_Button.prototype.disabled = false;
_Button.prototype.value = ';
_Button.prototype.src = ';
_Button.prototype.rollover_src = ';

2. Adjust the function _BTN_display(bReturnText)...
Locate and adjust the following
{// use anchor tag to support onclick on non-DHTML browsers
var strHandler = this._objEventManager.generateClientHandler(this.name,BTN_ONCLICK);
//image rollover facility
strHandler = '<A href="javascript:' + strHandler + '"';
if (this.rollover_src != ') {
strHandler += ' onmouseover="document.images[\' + this.name + '\'].src =\' + this.rollover_src + '\';"';
strHandler += ' onmouseout="document.images[\' + this.name + '\'].src =\' + this.src + '\';"';
}
strHTML = strHandler + '>' + strHTML + '</A>';
}

And Locate and adjust the following
strHTML = '<' + 'INPUT border=0 type=image name="' + this.name + '" id="' + this.id + '" src="' + this.src + '"';
if (this.alt != ')
strHTML += ' alt="' + this.alt + '"';
//add image rollover facility
if (this.rollover_src != ')
strHTML += ' onmouseover="this.src =\' + this.rollover_src + '\';" onmouseout="this.src =\' + this.src + '\';"';


3. Enjoy!
You can use the rollover now - but you can also adjust the BUTTON.ASP so that it remembers the rollover_src value between server trips - by adding code to the _BTN__preserveState() and _BTN__restoreState() functions. This means that you only need to set the image when thisPage.firstEntered is true...

Sub thisPage_onenter()
if thisPage.firstEntered = true then
pbAddNew.rollover_src = "../images/add_new_r.gif"
end if
End Sub

mbeedell@websitedesign.co.uk