Radio Button using Image

Pernah ngalamin dapet client yg permintaanya aneh2… hehe…

nah..saya pernah dapet permintaan ngerubah warna radio button jadi item…
defaultnya kan emank item, eitss tapi trnyata trgantung browser themes juga kyknya, soalnya di browser client saya neh warnanya biru trus di browser saya biru juga, tapi di browser tetangga2 saya udah item warnanya….nah loh….piye toh?
trus client gw neh, udah kekeuh (bhs sunda, artinya tegar, kuat, must be…) neh…pokoknya mau di buka di browser mana pun kudu item warnannya…

nah…pas lg browse2, ktemu lah saya sama ide ngerubah si buttonnya pake image, tadinya udah nyoba2 ndiri pake ajax, tp susah juga hehe….
and akhirnya bertemulah aku dengan helpers

nah kurang lebih kyk begono :

di layoutnya nampak sprti demikian….
panggil dulu javscriptnya, macam gini….

neh code javascriptnya :

var checkboxHeight = “25″;
var radioHeight = “25″;
var selectWidth = “190″;

/* No need to change anything after this */

document.write(‘input.styled { display: none; } select.styled { position: relative; width: ‘ + selectWidth + ‘px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }’);

var Custom = {
init: function() {
var inputs = document.getElementsByTagName(“input”), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == “checkbox” || inputs[a].type == “radio”) && inputs[a].className == “styled”) {
span[a] = document.createElement(“span”);
span[a].className = inputs[a].type;

if(inputs[a].checked == true) {
if(inputs[a].type == “checkbox”) {
position = “0 -” + (checkboxHeight*2) + “px”;
span[a].style.backgroundPosition = position;
} else {
position = “0 -” + (radioHeight*2) + “px”;
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
document.onmouseup = Custom.clear;
}
}
inputs = document.getElementsByTagName(“select”);
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == “styled”) {
option = inputs[a].getElementsByTagName(“option”);
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement(“span”);
span[a].className = “select”;
span[a].id = “select” + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.choose;
}
}
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == “checkbox”) {
this.style.backgroundPosition = “0 -” + checkboxHeight*3 + “px”;
} else if(element.checked == true && element.type == “radio”) {
this.style.backgroundPosition = “0 -” + radioHeight*3 + “px”;
} else if(element.checked != true && element.type == “checkbox”) {
this.style.backgroundPosition = “0 -” + checkboxHeight + “px”;
} else {
this.style.backgroundPosition = “0 -” + radioHeight + “px”;
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == “checkbox”) {
this.style.backgroundPosition = “0 0″;
element.checked = false;
} else {
if(element.type == “checkbox”) {
this.style.backgroundPosition = “0 -” + checkboxHeight*2 + “px”;
} else {
this.style.backgroundPosition = “0 -” + radioHeight*2 + “px”;
group = this.nextSibling.name;
inputs = document.getElementsByTagName(“input”);
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = “0 0″;
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName(“input”);
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == “checkbox” && inputs[b].checked == true && inputs[b].className == “styled”) {
inputs[b].previousSibling.style.backgroundPosition = “0 -” + checkboxHeight*2 + “px”;
} else if(inputs[b].type == “checkbox” && inputs[b].className == “styled”) {
inputs[b].previousSibling.style.backgroundPosition = “0 0″;
} else if(inputs[b].type == “radio” && inputs[b].checked == true && inputs[b].className == “styled”) {
inputs[b].previousSibling.style.backgroundPosition = “0 -” + radioHeight*2 + “px”;
} else if(inputs[b].type == “radio” && inputs[b].className == “styled”) {
inputs[b].previousSibling.style.backgroundPosition = “0 0″;
}
}
},
choose: function() {
option = this.getElementsByTagName(“option”);
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById(“select” + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;

oh iya… anyway code javascripnya pan di tulis orang lain jadi kudu include juga tulisan ini :

/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.

Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.

You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.

Visit http://ryanfait.com/ for more information.

*/

biar jng dikira plagiat….

truss…tambahin ini di css :

span.radio {
background:transparent url(/images/radio.gif) no-repeat scroll 0 0;
clear:left;
height:25px;
padding:5px 17px 3px 0;
width:19px;
}

nah…ini radio buttonnya….

”

All Libraries

My Library

”

trus di css nya kan manggil image tuh, nah ini dia imagenya…. tinggal di pilih2 aja…



radio button image helper









nah terakhir…buwat ngerapihin, ente tinggal atur aja tuh paddingnya yg di css…
smoga membantu… ^_^

badeweyy….si imagenya gag muncul klo di IE >.< iE emank auuuuuuuuuuuuuuutttttttttiiiiiiiiiiiiissssssss!!!!!!!!!!!!!

nti saya upgrade lagi blognya, klo dah bisa di iE… :p

Advertisement