Styling form buttons with CSS

**Alga** · 06-25-2010, 04:52 AM

Hi there,

Hope someone can help me with this one! I've got an image array with 'prev' and 'next' form buttons on javascript. I want to style the buttons with CSS so that they change colour when they become 'disabled'. So far, I've styled 'next' but the colour won't change when it's on disabled mode.

THANK YOU!!!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
	
	var imgSet = ['A.jpg','B.jpg','C.jpg','D.jpg','E.jpg'];
	var imgPath = "images/btb/";
	var nPgs = imgSet.length-1;
	var pg = 0;
				
	function turnPage(direction){
		
		if (direction == 'next')
			{
			 if (pg >= 0){document.getElementById('prevBtn').disabled = false}
			 if (pg < nPgs){pg++}
		         if (pg == nPgs){document.getElementById('nextBtn').disabled = true}
			}
			
		if (direction == 'prev')
			{
			 if (pg >= 1){pg--}
			 if (pg < nPgs){document.getElementById('nextBtn').disabled = false} 
			 if (pg == 0){document.getElementById('prevBtn').disabled = true}
		        }
		document.getElementById('swapImg').src = imgPath+imgSet[pg];
	} 

</script>
<style type="text/css">
<!--
input.fw {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #00CCFF;
	width: 40px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #FFFFFF;
}
input.fwhov {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #00CCFF;
	width: 40px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #FFFFFF;
	text-decoration: underline;
}
-->
</style>
</head>

<body>
<center>
<br>
<Img id='swapImg' Src='images/btb/A.jpg'>
<br>
<br>
<input type='button' id='prevBtn' value='Previous' onClick="turnPage('prev')" disabled>
<input type='button' class="fw" id='nextBtn' onmouseover="this.className='fw fwhov'" onmouseout="this.className='fw'" onClick="turnPage('next')" value='Next'>
</center>
</body>
</html>