Code-Bin #85 - Javascript Rollover Submit Button

Javascript Rollover Submit Button
Posted by: Stephen | January 22, 2008 @ 4:54pm

Revision 2 - Original post on January 22, 2008 @ 4:51pm

HTML Code

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript">
<!--
function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

<form name="myform" action="check.php" method="POST">
Username: <input type='text' name='username'><BR>
Password: <input type='text' name='password'><BR><BR>
<a href="javascript: submitform()"><img border="0" id="img1" src="button1.jpg" height="20" width="100" alt="Login" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')" fp-style="fp-btn: Braided Column 4" fp-title="Login"></a>
</form> 
<SCRIPT language="JavaScript1.2">
function submitform()
{
 document.myform.submit();
}
</SCRIPT>

</body>

</html>

Syntax Highlighting

[Open in new window]

Author Comments

This code is in responce to this forum discussion.

It uses images button1.jpg, button2.jpg, and button3.jpg. Button1 is used as the default image. Button2 is used on mouseover, and Button3 is used when the button is clicked.

Rating

4.72 / 8
166 Votes