Forum Moderators: open
any help is appreciated! thanks!
Hopefully the following file will illustrate 2 possible approaches
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>clicked buttons style</title>
<style type="text/css">
input[type=button] {
width:12.25em;
}
.myDefaultButton{
color:#333;
background:#999;
}
a input[type=button] {
color:#333;
background:#999;
}
a:active input[type=button] {
color:#666;
background:#ccc;
}
.myClickedButton{
color:#666;
background:#ccc;
}
</style>
<script type="text/javascript">
function myOnloadEvent()
{
document.myFormName.btn01.className='myDefaultButton';
document.myFormName.btn02.className='myDefaultButton';
}
function changeMyClassName(theButton)
{
myButtonID = theButton.id;
if(document.getElementById(myButtonID).className=='myClickedButton')
{
document.getElementById(myButtonID).className='myDefaultButton';
}
else
{
document.getElementById(myButtonID).className='myClickedButton';
}
}
</script>
</head>
<body onLoad="myOnloadEvent();">
<form name="myFormName" method="get" action=" ">
<h1>
<a href="http://www.webmasterworld.com/html/3697821.htm"
title="WebmasterWorld » HTML and Browsers » HTML 'clicked' buttons style ">
changeMyClassName() </a>
</h1>
<p>
<a href="#" title="sdfasfd">
<input id="btn00"
type="button"
value="Button 00"></a>
changes class name when active (mouse is clicked)
<br><br>
<input id="btn01"
type="button"
value="Button 01"
onClick="changeMyClassName(this);">
changes class name when clicked (and stays changed until clicked again)
</p>
</form>
</body>
</html>
