Forum Moderators: open
<script type="text/javascript">
<!--
//script to change background-color of the selected
//button and put the appropriate value in an input object
function btnClick(btnNum){
for (i=1;i<=4;i++){
tempBtnVal=document.getElementById('btnVal')
tempBtn=document.getElementById('btn'+i)
tempBtn.style.backgroundColor=(i==btnNum?'#ff0000':'#ffffff')
}
tempBtnVal.value=btnNum
}
//-->
</script>
<style type="text/css">
.buttonDiv{
position:relative;
float:left;
border:1px solid #000000;
margin-right: 0.5em;
}
</style>
</head>
<body>
<div id="btn1" name="btn1" class="buttonDiv" onclick="btnClick('1')"> </div>
<div id="btn2" name="btn2" class="buttonDiv" value='2' onclick="btnClick('2')"> </div>
<div id="btn3" name="btn3" class="buttonDiv" value='3' onclick="btnClick('3')"> </div>
<div id="btn4" name="btn4" class="buttonDiv" value='4' onclick="btnClick('4')"> </div>
<!--change the type of this input object to hidden for real-life application//-->
<input id="btnVal" name="btnVal" type="text" value="" />
</body>
Hope this helps,
ajkimoto
Your code works great!
How would I get the above code to work if I wanted to change images instead of colors?
Not too tough--code much like js rollover buttons:
I added an image element to each of the btn divs. Instead of toggling the backgroundColor of a div, toggle the image src.
<script type="text/javascript">
<!--
//preload images
var iUnclick=new Image()
iUnclick.src=unclicked.gif'
var iClick=new Image()
iClick.src=clicked.gif'
//pretty much the same as before but tempBtn is now the image contained in the div
function btnClick(btnNum){
for (i=1;i<=4;i++){
tempBtnVal=document.getElementById('btnVal')
tempBtn=document.getElementById('btnImg'+i)
//toggle the src of tempBtn between iClick.src (click.gif) and iUnclick.src (unclick.gif)
tempBtn.src=(i==btnNum?iClick.src:iUnclick.src)
}
tempBtnVal.value=btnNum
}
//-->
</script>
<style type="text/css">
.buttonDiv{
position:relative;
float:left;
border:0;
margin-right: 0.5em;
}
</style>
</head>
<body>
<div id="btn1" name="btn1" class="buttonDiv" onclick="btnClick('1')"><img id="btnImg1" src="unclicked.gif" /></div>
<div id="btn2" name="btn2" class="buttonDiv" onclick="btnClick('2')"><img id="btnImg2" src="unclicked.gif" /></div>
<div id="btn3" name="btn3" class="buttonDiv" onclick="btnClick('3')"><img id="btnImg3" src="unclicked.gif" /></div>
<div id="btn4" name="btn4" class="buttonDiv" onclick="btnClick('4')"><img id="btnImg4" src="unclicked.gif" /></div>
<input id="btnVal" name="btnVal" type="text" value="" />
</body>
ajkimoto
