how can I change radio button into image?

[Fary4u]

how can i change radio button into image but functionality should be like radio button ?

.pic
{ background:url(pic.jpg) no-repeat; } 
<input type=radio src=pic.jpg value=1 name=1>
or
<input type=radio class=pic value=1 name=1>
 

none of them is working :(

[Dormilich]

obviously. you can’t apply an image to a radio button.

depending on what you _exactly_ want, I can give you an advice, though.

[Fary4u]

trying to replace radio button into image
so it's not look like a radio button
it's only look like a image.

any thought ?

[Dormilich]

use an image or an element with background image, and emulate the radio button behaviour by JavaScript.

of course, you will need a fallback, should JavaScript be disabled (e.g. replace the radio button with the image through JS)

[Fary4u]

bro is it possible u've got any example in hand ?

[Dormilich]

I would have to make up one.

<!-- I leave the CSS to your imagination -->
<span class="radio"></span>

// for simplicity, only standard compliant code
// 'span' being a reference to the <span> element
function toggle()
{
    this.checked = !this.checked;
    if (this.checked) {
        this.textContent = "●";
    }
    else {
        this.textContent = "";
    }
}
span.addEventListener("click", toggle, false);

[Fary4u]

thxs for the coding works fine,

my coding only work with input element ( checkbox & radio button ) coz it's asp.net funcation using sql query.

i've got 10 different radio buttons & need 2 replace each different images which one is the easy method ?

<input type=radio value=1 name=red> 
<input type=radio value=1 name=blue> 
<input type=radio value=1 name=green> 
<input type=radio value=1 name=black> 
<input type=radio value=1 name=white> 
 

[Dormilich]

that depends on whether you still need the radios.