DHTML Window widget button rollover modification

[ooop]

DD's DHMTL Window widget - with button rollover modification
Original Author: Dynamic Drive (rollover effect modifications by ooop),
original DD script available at:
http://www.dynamicdrive.com/dynamici...ndow/index.htm

__________________________________


How to create a ROLLOVER effect

for the 'popup' window's buttons in
DD's DHMTL Window widget

__________________________________

Read up on this modification's method
OR
grab the attached zip now

Please visit DD's URL listed above for complete project and background info!!!!!

(!!!!!) < the statement directly above needed more exclamation marks!


-- FIRST NOTE:
i have no idea where to post/submit modifications to existing DD scripts - this area seemed "best" fitting - sorry if i'm wrong - moderators/admins are welcome to move this post to better fitting area.

______________________________________

other than making 2 images, of the "ON" and "OFF" states, for each control button - all you need to do is 4 easy steps to modify DD's dhtmlwindow.js to make a button rollover effect for 'popup' windows...

>>> Step 0 ------------------------------------------------------------

make "more" buttons...

make "ON" looking button images for the mouse over effect for each of the following buttons:
- min.gif
- close.gif
- restore.gif
name the new "ON" looking buttons like so...
- min_on.gif
- close_on.gif
- restore_on.gif
place them into your windowfiles' folder with your other images.

// as well, you can make the original buttons look more "OFF"
// but don't rename them there originals IF you desire to follow the following
// Ha He Ha...
// now for the important stuff...



>>> Step 1 ------------------------------------------------------------

intergrate images that are the "ON" state into the imagefiles array...

change [ line 9 ]:

imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that order

to:

imagefiles:['windowfiles/min.gif', 'windowfiles/min_on.gif', 'windowfiles/close.gif', 'windowfiles/close_on.gif', 'windowfiles/restore.gif', 'windowfiles/restore_on.gif', 'windowfiles/resize.gif'], //Path to images used by script

// intergrating the names of each "ON" state - assuming that default images are the "OFF" state.
// of course you can play with this configuration and naming convention as you see fit.
// just be sure if you drift from the convention i present (above) to reflect such in the following steps.

// note: i like keeping the button states of each next to one another in the 'imagefiles' array
// and by doing it this way, i did create a little more work - but like i said, i like it like this...



>>> Step 2 ------------------------------------------------------------

reflect the new imagefiles naming convention in proper areas...

________sub-step 1 & 2

change [ lines 21 and 24 ] (note lines 21 to 24 are displayed below):

	domwindowdata+='DHTML Window <div class="drag-controls"><img src="'+this.imagefiles[0]+'" title="Minimize" /><img src="'+this.imagefiles[1]+'" title="Close" /></div>'
	domwindowdata+='</div>'
	domwindowdata+='<div class="drag-contentarea"></div>'
	domwindowdata+='<div class="drag-statusarea"><div class="drag-resizearea" style="background: transparent url('+this.imagefiles[3]+') top right no-repeat;">&nbsp;</div></div>'

to the following:

	domwindowdata+='DHTML Window <div class="drag-controls"><img src="'+this.imagefiles[0]+'" title="Minimize" /><img src="'+this.imagefiles[2]+'" title="Close" /></div>'
	domwindowdata+='</div>'
	domwindowdata+='<div class="drag-contentarea"></div>'
	domwindowdata+='<div class="drag-statusarea"><div class="drag-resizearea" style="background: transparent url('+this.imagefiles[6]+') top right no-repeat;">&nbsp;</div></div>'

// the changes above were (in case you didn't notice)....
// [ towards end of line 21 ] src="'+this.imagefiles[1]+'" title="Close" [ was changed to ] src="'+this.imagefiles[2]+'" title="Close"
// [ and towards end of line 24 ] url('+this.imagefiles[3]+') [ was changed to ] url('+this.imagefiles[6]+')

________sub-step 3

[jump to line 205 ] and in the 'minimize:function' change:

	button.setAttribute("src", dhtmlwindow.imagefiles[2])

to:

	button.setAttribute("src", dhtmlwindow.imagefiles[4])

>>> Step 3 ------------------------------------------------------------

directly after the 'enablecontrols:function' [ lines 191 to 201 ]:

enablecontrols:function(e){
	var d=dhtmlwindow
	var sourceobj=window.event? window.event.srcElement : e.target //Get element within "handle" div mouse is currently on (the controls)
	if (/Minimize/i.test(sourceobj.getAttribute("title"))) //if this is the "minimize" control
		d.minimize(sourceobj, this._parent)
	else if (/Restore/i.test(sourceobj.getAttribute("title"))) //if this is the "restore" control
		d.restore(sourceobj, this._parent)
	else if (/Close/i.test(sourceobj.getAttribute("title"))) //if this is the "close" control
		d.close(this._parent)
	return false
},

add the following two new functions:

turnoncontrols:function(e){
	var d=dhtmlwindow
	var sourceobj=window.event? window.event.srcElement : e.target //

	if (/Minimize/i.test(sourceobj.getAttribute("title"))) //if this is the "minimize" control
		sourceobj.setAttribute("src", dhtmlwindow.imagefiles[1])
	else if (/Restore/i.test(sourceobj.getAttribute("title"))) //if this is the "restore" control
		sourceobj.setAttribute("src", dhtmlwindow.imagefiles[5])
	else if (/Close/i.test(sourceobj.getAttribute("title"))) //if this is the "close" control
		sourceobj.setAttribute("src", dhtmlwindow.imagefiles[3])
	return false
},

turnoffcontrols:function(e){
	var d=dhtmlwindow
	var sourceobj=window.event? window.event.srcElement : e.target //

	if (/Minimize/i.test(sourceobj.getAttribute("title"))) //if this is the "minimize" control
		sourceobj.setAttribute("src", dhtmlwindow.imagefiles[0])
	else if (/Restore/i.test(sourceobj.getAttribute("title"))) //if this is the "restore" control
		sourceobj.setAttribute("src", dhtmlwindow.imagefiles[4])
	else if (/Close/i.test(sourceobj.getAttribute("title"))) //if this is the "close" control
		sourceobj.setAttribute("src", dhtmlwindow.imagefiles[2])
	return false
},

// the above might be a little awkward, but it works like a champ.
// i'm totally open to suggestions - but first please read my conclusion



>>> Step 4 ------------------------------------------------------------

create event "catchers" and "handlers" for 'mouse over' and 'mouse out' on the control buttons...

directly after [ line 43 ]:

	t.controls.onclick=dhtmlwindow.enablecontrols

add the following two lines:

	t.controls.onmouseover=dhtmlwindow.turnoncontrols
	t.controls.onmouseout=dhtmlwindow.turnoffcontrols

// note: "turnoncontrols" and "turnoffcontrols" are the new functions that were created in step 3.



----------------------------------------------------------------------

all done!



>>> Conclusion -----------------------------------------------

yeah, i could have done the above many different ways - like adding the new "ON" images at the end of the 'imagefiles' array to cut down on a few edits here and there - OR instead of adding images at all, i could have implimented a mouse over offset effect and even maybe mixed it with some sort of visual filter - heck, i think i could have even worked out the above by somehow making it CSS driven - etc. etc. - but i liked getting 'down and dirty' - so i only ask that feedback be made to directly address the method i've implimented here - if you perfer an alternate method for a rollover effect on the 'popup' window's buttons, i urge you to post it in a new thread - i might like reviewing it

AND since you've been so kind as to follow me this far i would like to return the favor and provide you not only with the complete modified dhtmlwindow.js but also included MS XP-ish looking buttons with each ON/OFF looking states

ATTACHED BELOW:

// i should mention each are a non-standard 15px X 15px and in my CSS i added a 1px left margin to these buttons

AND...
You will still have to visit DD's page to get complete project and more info:
http://www.dynamicdrive.com/dynamici...ndow/index.htm

all my little thing does, as stated, is add the rollover effect to 'popup' window's buttons...