Web Analytics Made Easy -
StatCounter Image highlighting on clicking radio button - CodingForum


No announcement yet.

Image highlighting on clicking radio button

  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved Image highlighting on clicking radio button

    Hi all,

    I have the following code in my html.

    <form name="createaccount" action="" method="post">
    <div class="formrow">
    <label>Select an Avatar:</label>
    <div class="fieldcontent">
    <img src="images/avatar1.jpg" class="avatargal" id="Image1" />
    <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image1');" onblur="imageoff('Image1');" />
    <img src="images/avatar3.jpg" class="avatargal" id="Image2" />
    <input type="radio" name="selectavatar" class="radiobtn" checked="checked" onclick="imageon('Image2');" onblur="imageoff('Image2');" />
    <img src="images/avatar4.jpg" class="avatargal" id="Image3" />
    <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image3');" onblur="imageoff('Image3');" />
    <img src="images/avatar5.jpg" class="avatargal" id="Image4" />
    <input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image4');" onblur="imageoff('Image4');" />
    <img src="images/avatar3.jpg" class="avatargal" id="Image5" />
    <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image5');" onblur="imageoff('Image5');" />
    <img src="images/avatar5.jpg" class="avatargal" id="Image6" />
    <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image6');" onblur="imageoff('Image6');" />
    <img src="images/avatar1.jpg" class="avatargal" id="Image7" />
    <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image7');" onblur="imageoff('Image7');" />
    <img src="images/avatar4.jpg" class="avatargal" id="Image8" />
    <input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image8');" onblur="imageoff('Image8');" />


    The javascipt is:

    function imageon(here)

    var elem= document.getElementById(here);
    elem.style.border = "solid 2px blue";
    function imageoff(here)

    var elem= document.getElementById(here);
    elem.style.border = "solid 2px white";


    When user clicks radio button near "Image1" then "Image1" is highlighted in blue color border, and previously selected image gets white border.

    This works in firefox and internet explorer but not on chrome and safari.

    Any help?
    Last edited by Paramasivan; Aug 22, 2011, 05:07 PM.

  • #2
    I have done with :

    // JavaScript Document
    function nilborder()
    var image1null = document.getElementById('Image1');
    image1null.style.border = "solid 2px white";
    var image2null = document.getElementById('Image2');
    image2null.style.border = "solid 2px white";
    var image3null = document.getElementById('Image3');
    image3null.style.border = "solid 2px white";
    var image4null = document.getElementById('Image4');
    image4null.style.border = "solid 2px white";
    var image5null = document.getElementById('Image5');
    image5null.style.border = "solid 2px white";
    var image6null = document.getElementById('Image6');
    image6null.style.border = "solid 2px white";
    var image7null = document.getElementById('Image7');
    image7null.style.border = "solid 2px white";
    var image8null = document.getElementById('Image8');
    image8null.style.border = "solid 2px white";
    function changeborder()
    if (document.createaccount.selectavatar[0].checked==true) {
    var image1fill = document.getElementById('Image1');
    image1fill.style.border = "solid 2px blue";
    return false;
    else if (document.createaccount.selectavatar[1].checked==true) {
    var image2fill = document.getElementById('Image2');
    image2fill.style.border = "solid 2px blue";
    return false;
    else if (document.createaccount.selectavatar[2].checked==true) {
    var image3fill = document.getElementById('Image3');
    image3fill.style.border = "solid 2px blue";
    return false;
    else if (document.createaccount.selectavatar[3].checked==true) {
    var image4fill = document.getElementById('Image4');
    image4fill.style.border = "solid 2px blue";
    return false;
    else if (document.createaccount.selectavatar[4].checked==true) {
    var image5fill = document.getElementById('Image5');
    image5fill.style.border = "solid 2px blue";
    return false;
    else if (document.createaccount.selectavatar[5].checked==true) {
    var image6fill = document.getElementById('Image6');
    image6fill.style.border = "solid 2px blue";
    return false;
    else if (document.createaccount.selectavatar[6].checked==true) {
    var image7fill = document.getElementById('Image7');
    image7fill.style.border = "solid 2px blue";
    return false;
    else if (document.createaccount.selectavatar[7].checked==true) {
    var image8fill = document.getElementById('Image8');
    image8fill.style.border = "solid 2px blue";
    return false;


    Is it possible to reduce the code?

    Thanks in advance.


    • #3
      As far as I know the correct syntax for CSS border is

      border: Width+Unit Style Color

      so something like "border: 1px solid black". See a short example here: http://jsbin.com/apadom. If you hover the mouse over the example page you will see the button "Edit in jsbin.com" where you can find the full source of the example (HTML/Javascript)


      • #4
        It is not working in chrome and safari. When one image is clicked, the border around the other images should vanish.


        • #5
          I think it's about the blur, which is not the correct event for unselecting a radio button. In fact, I think there is no event for unselecting a radio button.

          Try this example: http://jsbin.com/apadom/2


          • #6
            Thanks! It works.


            • #7
              Originally posted by Paramasivan View Post
              Thanks! It works.
              When you are satisfied with the solution, mark the thread as "RESOLVED".