Entry

How do I create button that appears onmouseover like the buttons in Microsoft Word?

Apr 5th, 2008 19:36
ha mo, Colin Fraser, Jim MacDowell,

Firstly you can try this 
<A HREF="javascript:void(null)" 
         onMouseDown="document.pic1.src='buttondown.gif'"
         onMouseUp="document.pic1.src='buttonup.gif'"
         onMouseOver="document.pic1.src='buttonover.gif'">
         <IMG SRC="buttonup.gif" BORDER=0 NAME="pic1"></a>
This creates the roll over effect and in this code the anchor points 
nowhere. You need three buttons showing the button in different states, 
then call them in your page. 
A problem arises when you need to create the effect on a web page. This 
is a simple issue, the images all need be cached or every time the mouse 
is over the button or is clicked, the browser returns to the page, 
downloads the button then swaps it. Too slow. 
A better approach is this:
This code is placed in the header of a page or in the *.js file
if (document.images) { 
	arrowPink = new Image 
	arrowBlue = new Image
	arrowRed  = new Image
	arrowPink.src="arrowp.gif"
	arrowBlue.src="arrowb.gif"
	arrowRed.src ="arrowr.gif"
}  //end if
//This function changes the images in every page
function chgImage (imgName,newImg ) {
	if (document.images) {
		document[imgName].src=eval(newImg+".src")
	}  //end if
} //end function
This is placed in the page
<a href="javascript:void(null)"
	onMouseOver="chgImage('pic0','arrowPink')"
	onMouseOut="chgImage('pic0','arrowBlue')"
	onMouseDown="chgImage('pic0','arrowRed')"
	style="text-decoration:none"> <IMG SRC="arrowb.gif" BORDER=0 
NAME="pic0" ALT="Whatever you want"></a> 
Note: I use the onMouseDown rather than onClick, there is no particular 
reason except that it is cleaner and offers more imediate control for my 
taste
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com