checkbox styling [css + javascript]

11/16/2011 18:52 Tyrar#1
gut gut... (immer wieder schwer einen anfang zu finden :D)
also, ich versuche einfach mal zu erklären, wie man eine checkbox für seine website ein wenig verschönern kann!
dazu sollte man als erstes ein schönes bild haben, welches die checkbox states beinhaltet. in diesem tutorial habe ich ein ziemlich einfach gehaltenes genommen: [Only registered and activated users can see links. Click Here To Register...]

gehts jetzt direkt mit dem css script weiter, es sind 2 klassen nötig, jede klasse (ich nenne sie "checkbox_checked" und "checkbox_unchecked") sollte nach möglichkeit 3 states haben (normal, hover, active)
Code:
.checkbox_checked {
width: 22px;
height: 22px;
display: block;
background-image: url(images/checkbox.png);
background-position: -22px 0px;
}
.checkbox_checked:hover {
background-position: -22px -22px;
}
.checkbox_checked:active {
background-position: -22px -44px;
}

.checkbox_unchecked {
width: 22px;
height: 22px;
display: block;
background-image: url(images/checkbox.png);
background-position: 0px 0px;
}
.checkbox_unchecked:hover {
background-position: 0px -22px;
}
.checkbox_unchecked:active {
background-position: 0px -44px;
}
das wärs soweit für den style! (hier sollte zu beachten sein dass das bild immer an position 0 anfängt, also muss man das bild in den negativen bereich schieben um ein bestimmtes teilbild zu haben)
wenn man jetzt also z.b. einen div tag erstellt der die klasse checkbox_checked hat
Code:
<div class="checkbox_checked"></div>
hat man ein 4 eckiges feld mit einem X in der mitte, wenn man mit der maus drüber fährt oder klickt siehts anders aus... schön und gut, bis hier nichts besonderes... jetzt kommt aber der eigentliche trick: javascript!
mit javascript wird bei einem onclick event des div tags die klasse zwischen "checkbox_checked" und "checkbox_unchecked" geswitcht... das ist auch schon alles!
Code:
function changeCheckBox(elem) {
if(elem.className=='checkbox_checked') elem.className='checkbox_unchecked';
else if(elem.className=='checkbox_unchecked') elem.className='checkbox_checked';
}
und noch für den tag
Code:
<div class="checkbox_unchecked" onclick="javascript:changeCheckBox(this);"></div>
so reicht das noch nicht für ein formular aus, aber es sieht gut aus :-)

the end