1 Attachment(s)
DHTML Window widget button rollover modification
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 ]:
Code:
imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that order
to:
Code:
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):
Code:
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;"> </div></div>'
to the following:
Code:
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;"> </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:
Code:
button.setAttribute("src", dhtmlwindow.imagefiles[2])
to:
Code:
button.setAttribute("src", dhtmlwindow.imagefiles[4])
>>> Step 3 ------------------------------------------------------------
directly after the 'enablecontrols:function' [ lines 191 to 201 ]:
Code:
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:
Code:
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 ]:
Code:
t.controls.onclick=dhtmlwindow.enablecontrols
add the following two lines:
Code:
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...
