PDA

View Full Version : Hover stays onclick - edit for multiple CSS buttons

niki
11-17-2005, 05:53 AM
I got this fabulous piece of code from an old forum thread. I just need to edit one thing and as I designer it is proving difficult. The code is based on all buttons using the same three css styles, however I have unique styles for each of my buttons (they are graphics). Like the lastID, I need to store the last class of the previously clicked button so I can refer to the class in function active(id,clas) so it would look something like
(LastID).className = LastClass:"")
instead off
(LastID).className = "butta":"")

Thank You :confused:

here is the original code

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="JavaScript">
<!--
LastID = ""
function on(id,clas){
(LastID != id?document.getElementById(id).className = clas:"")
}

function off(id,clas){
(LastID != id?document.getElementById(id).className = clas:"")
}

function active(id,clas){
document.getElementById(id).className = clas; // onclick
if (LastID != id){
(LastID != ""?document.getElementById(LastID).className = "butta":"")
}
LastID = id
}
// -->
</script>
<style>
.butta{width:70;text-align:center;font-size:14;color:#000000;vertical-align:center;border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background:#b0bbce}
.buttovera{width:70; text-align:center;font-size:14;vertical-align:center;color:#93a2bb;border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb;background:#b0bbce}
.buttdowna{width:70; text-align:center;font-size:12;vertical-align:center;color:#000000;border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background:#718099}
</style>


</HEAD><BODY>

<form>
<input type="button" value="button 1" id="button1" class="butta" onmouseover="on('button1','butta')" onMouseup="off('button1','buttovera')" onmousedown="active('button1','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button2" class="butta" onmouseover="on('button2','butta')" onMouseOut="off('button2','butta')" onmousedown="active('button2','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button3" class="butta" onmouseover="on('button3','butta')" onMouseOut="off('button3','butta')" onmousedown="active('button3','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button4" class="butta" onmouseover="on('button4','butta')" onMouseOut="off('button4','butta')" onmousedown="active('button4','buttdowna')" onclick="this.blur()">
</form>
</BODY></HTML>
Mr J
11-17-2005, 08:35 PM
I did the above script specifically to work with buttons the following link shows an example using a different image set for individual links.

www.huntingground.freeserve.co.uk/scripts/img_links_mult.htm

also

www.huntingground.freeserve.co.uk/scripts/text_links_mult.htm
Mr J
11-17-2005, 11:12 PM
Just in case you do want buttons

<script language="JavaScript">
<!--

myArray=new Array()
myArray[0]=new Array("butt1","butt1over","butt1down")
myArray[1]=new Array("butt2","butt2over","butt2down")
myArray[2]=new Array("butt3","butt3over","butt3down")
myArray[3]=new Array("butt4","butt4over","butt4down")

LastID = ""
lastClas=""
function on(id,clas){
(LastID != id?document.getElementById(id).className = myArray[clas][1]:"")
}

function off(id,clas){
(LastID != id?document.getElementById(id).className = myArray[clas][0]:"")
}

function active(id,clas){
document.getElementById(id).className = myArray[clas][2]
if (LastID != id){
(LastID != ""?document.getElementById(LastID).className = myArray[lastClas][0]:"")

}
LastID = id
lastClas=clas
}
// -->
</script>

<style>
.butt1{
width:70;
text-align:center;
font-size:14;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#44aa44
}

.butt1over{
width:70;
text-align:center;
font-size:14;
color:#93a2bb;
border-top:2px solid #93a2bb
border-left:2px solid #93a2bb;
border-right:2px solid #93a2bb;
border-bottom:2px solid #93a2bb;
background-color:#aaddaa
}

.butt1down{
width:70;
text-align:center;
font-size:12;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background-color:#77aa77
}

.butt2{
width:70;
text-align:center;
font-size:14;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#aaaa44
}

.butt2over{
width:70;
text-align:center;
font-size:14;
color:#93a2bb;
border-top:2px solid #93a2bb;
border-left:2px solid #93a2bb;
border-right:2px solid #93a2bb;
border-bottom:2px solid #93a2bb;
background-color:#dddda
}

.butt2down{
width:70;
text-align:center;
font-size:12;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background-color:#aaaa77
}

.butt3{
width:70;
text-align:center;
font-size:14;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#aa4444
}

.butt3over{
width:70;
ext-align:center;
font-size:14;
color:#93a2bb;
border-top:2px solid #93a2bb;
border-left:2px solid #93a2bb;
border-right:2px solid #93a2bb;
border-bottom:2px solid #93a2bb;
background-color:#ddaaaa
}

.butt3down{
width:70;
text-align:center;
font-size:12;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background-color:#aa7777
}

.butt4{
width:70;
text-align:center;
font-size:14;
color:#000000;
border-top:2px outset #eeeeee;
border-left:2px outset #bbbbbb;
border-right:2px outset #dddddd;
border-bottom:2px outset #cccccc;
background-color:#4444aa
}

.butt4over{
width:70;
text-align:center;
font-size:14;
color:#93a2bb;
border-top:2px solid #93a2bb;
border-left:2px solid #93a2bb;
border-right:2px solid #93a2bb;
border-bottom:2px solid #93a2bb;
background-color:#aaaadd
}

.butt4down{
width:70;
text-align:center;
font-size:12;
color:#000000;
border-top:2px inset #dce1e9;
border-left:2px inset #dce1e9;
border-right:2px inset #dce1e9;
border-bottom:2px inset #dce1e9;
background-color:#7777aa
}
</style>

<form>
<input type="button" value="button 1" id="button1" class="butt1" onmouseover="on(this.id,0)" onMouseout="off(this.id,0)" onmousedown="active(this.id,0)" onclick="this.blur()">

<input type="button" value="button 4" id="button2" class="butt2" onmouseover="on(this.id,1)" onMouseOut="off(this.id,1)" onmousedown="active(this.id,1)" onclick="this.blur()">

<input type="button" value="button 4" id="button3" class="butt3" onmouseover="on(this.id,2)" onMouseOut="off(this.id,2)" onmousedown="active(this.id,2)" onclick="this.blur()">

<input type="button" value="button 4" id="button4" class="butt4" onmouseover="on(this.id,3)" onMouseOut="off(this.id,3)" onmousedown="active(this.id,3)" onclick="this.blur()">
</form>
niki
11-17-2005, 11:50 PM
Fantastic, worked a treat... and very flexible script :thumbsup: