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?

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.

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)

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

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

Thanks! It works.

Thanks! It works.

When you are satisfied with the solution, mark the thread as "RESOLVED".
:thumbsup: