Въпрос за картинка вместо радио бутон

[TaLenTo]

Здравейте!

Значи става на въпрос за промяна на radio бутонът, вместо кръгчето което е по дефаулт да има картинка. Това става със javascript и вероятно css, но не мога да разбера как точно. Имам javascript кода, но не мога да го инклудна във input полето.

Става на впъорс примерно картинката кога не е маркиран един от бутоните да е " " и когато се маркира да стане " " старият сайт на www.muzi4ka.com беше така и по-точно търсачката им беше така. Кода, който имам е като техният, въпросът е как да го инклудна.

По принцип input полето ми е таака:

<input type="radio" name="kakvo" value="song">

Пробвах да го направя така:

<input type="radio" name="kakvo" value="song" OnClick="replaceChecks();" >

... но никаква промяна. Ако някой може да помогне, ще съм му много благодарен.

Ето и JavaScript кода:

// this sets the buttons (images) to use
var button1 = 'images/srch_songs.jpg';
var button2 = 'button2.jpg';
var button1on = 'images/srch_songson.jpg';
var button2on = 'button2_on.jpg';
// End of needed changes

var inputs;

function replaceChecks() {
   
	//get all the input fields on the page
	inputs = document.getElementsByName(whichQ);

	//cycle trough the input fields
	for(var i=0; i < inputs.length; i++) {

		//check if the input is a checkbox
		if(inputs[i].getAttribute('type') == 'radio') {
		   
			//create a new image
			var img = document.createElement('img');
		   
			//check if the checkbox is checked
			if(inputs[i].checked) {
			   
	if(i==0)
	  img.src = button1on;
	else
	  img.src = button2on;
   
			} else {
				if(i==0)
	img.src = button1;
	else
	  img.src = button2;
			}

			//set image ID and onclick action
			img.id = 'checkImage'+i;
			//set image
			img.onclick = new Function('checkChange('+i+')');
			//place image in front of the checkbox
			inputs[i].parentNode.insertBefore(img, inputs[i]);
		   
			//hide the checkbox
			inputs[i].style.display='none';
		}
	}
}

function checkChange(i) {
//alert(i);
	if(inputs[i].checked) {
		inputs[i].checked = '';
   if(i==0)
		document.getElementById('checkImage'+i).src= button1;
   else
   document.getElementById('checkImage'+i).src= button2;
 
	} else {
		inputs[i].checked = 'checked';
  if(i==0){
  document.getElementById('checkImage'+0).src= button1on;
  document.getElementById('checkImage'+1).src= button2;
  }
  if(i==1){
  document.getElementById('checkImage'+0).src= button1;
  document.getElementById('checkImage'+1).src= button2on;
  }
   
	}
}

setTimeout("replaceChecks()", 0);

 

[animatora]

Виж един от моите уроци, има за чекбокс само трябва да си го промениш малко

 

[Ev0luti0N]

100% working :?:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

 

[TaLenTo]

Така един пич ми помогна и сега искарвам, но само 2 картинки.

Добавих в първите редове още 2 картинки, но не стана.. явно кода трябва да се пипне на няколко места. Става на въпрос да се искарат още 2 картинки.

Ето новият код:

<script type="text/javascript">
                    // this sets the buttons (images) to use
                    var button1 = 'images/srch_songs.jpg';
                    var button2 = 'button2.jpg';
                    var button1on = 'images/srch_songson.jpg';
                    var button2on = 'button2_on.jpg';
                    // End of needed changes
        
                    var inputs;
        
                    function replaceChecks() {
        
                    //get all the input fields on the page
                    inputs = document.getElementsByTagName('input');
        
                    //cycle trough the input fields
                    for(var i=0; i < inputs.length; i++) {
        
                        //check if the input is a checkbox
                        if(inputs[i].getAttribute('type') == 'radio' && inputs[i].className.match( /(^| )prettyRadio( |$)/ ) ) {

                            //create a new image
                            var img = document.createElement('img');

                            //check if the checkbox is checked
                            if(inputs[i].checked) {
        
                                if(i==0)
                                      img.src = button1on;
                                else
                                  img.src = button2on;
          
                            } else {
                                if(i==0)
                            img.src = button1;
                            else
                              img.src = button2;
                          }
        
                        //set image ID and onclick action
                        img.id = 'checkImage'+i;
                        //set image
                        img.onclick = new Function('checkChange('+i+')');
                        //place image in front of the checkbox
                        inputs[i].parentNode.insertBefore(img, inputs[i]);
        
                            //hide the checkbox
                            inputs[i].style.display='none';
                        }
                    }
                }
        
                    function checkChange(i) {
                        //alert(i);
                        if(inputs[i].checked) {
                            inputs[i].checked = '';
                           if(i==0)
                                document.getElementById('checkImage'+i).src= button1;
                           else
                               document.getElementById('checkImage'+i).src= button2;
                        } else {
                        inputs[i].checked = 'checked';
                      if(i==0){
                          document.getElementById('checkImage'+0).src= button1on;
                      document.getElementById('checkImage'+1).src= button2;
                  }
                  if(i==1){
                      document.getElementById('checkImage'+0).src= button1;
                      document.getElementById('checkImage'+1).src= button2on;
                  }
                  
                    }
                }
        </script>