Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post

    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');" />
    </div>
    </div>
    </form>

    -----------

    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; 08-22-2011 at 10:07 PM.

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    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()
    {
    nilborder();
    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
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    It is not working in chrome and safari. When one image is clicked, the border around the other images should vanish.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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

  • Users who have thanked devnull69 for this post:

    Paramasivan (08-22-2011)

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thanks! It works.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Thumbs up

    Quote Originally Posted by Paramasivan View Post
    Thanks! It works.
    When you are satisfied with the solution, mark the thread as "RESOLVED".


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •