image onclick border change

[Timms]

4 images lined up together;

when user clicks on the image it inserts a value in to a hidden field to send to mysql server (using onclick);

Using JS to change a preview image when image is clicked;

Now what i want to do is scrap the preview (image that changes on image click) and place a border around the image that is clicked on… not only that but i need to remove the border if another image is clicked.

Here is my JS code and html code

My Java script

<script language="javascript" type="text/javascript">
function SetImageName(strName)
{
	//change the input field name to the name of image we want to use
  document.getElementById("ImageName").value = strName;
  //Change preview image when clicked
  document.getElementById("imageid").src= "includes/img/memory/" + strName + ".gif";
}
</script>

and the html i am using

<!-- ALLOW USER TO SELECT IMAGE-->
Select your image<br /><br />
  <img src="includes/img/memory/memory1.gif" name="memory1" class="memoryselectimg" onclick="SetImageName(this.name)"/>
  <img src="includes/img/memory/memory2.gif" name="memory2" class="memoryselectimg" onclick="SetImageName(this.name)"/>
  <img src="includes/img/memory/memory3.gif" name="memory3" class="memoryselectimg" onclick="SetImageName(this.name)"/>
  <img src="includes/img/memory/memory4.gif" name="memory4" class="memoryselectimg" onclick="SetImageName(this.name)"/>
  <input type="hidden" value="memory1" id="ImageName" name="ImageName">

<!-- preview image from when user clicks -->
 <img src="includes/img/memory/memory1.gif" id="imageid" name="imageid" class="memoryselectimg" />

Anyone got a starting point for me?

Much Appriciated!

[Timms]

opppp i got it

<script language="javascript" type="text/javascript">
function SetImageName(strName)
{
//if there has been no input then dont call it (should not need but just incase
var previd
if (previd = "") {
}else{
	//get the previous id ready
previd = document.getElementById("ImageName").value;
//change the border of the previous id
   document.getElementById(previd).style.border="none";
}
	//change the input field name to the name of image we want to use
  document.getElementById("ImageName").value = strName;
  //cchange the border to the image that was clicked
  document.getElementById(strName).style.border="2px solid #E8272C";


}
</script>

<!-- ALLOW USER TO SELECT IMAGE--> Select your image<br /><br /> <img src="includes/img/memory/memory1.gif" name="memory1" id="memory1" class="memoryselectimg" onclick="SetImageName(this.name)" style="border:2px solid #E8272C;"/> <img src="includes/img/memory/memory2.gif" name="memory2" class="memoryselectimg" id="memory2" onclick="SetImageName(this.name)"/> <img src="includes/img/memory/memory3.gif" name="memory3" class="memoryselectimg" id="memory3" onclick="SetImageName(this.name)"/> <img src="includes/img/memory/memory4.gif" name="memory4" class="memoryselectimg" id="memory4" onclick="SetImageName(this.name)"/> <input type="hidden" value="memory1" id="ImageName" name="ImageName">

[m11]

Have you looked into using jQuery? It sure saves a lot of time and code

// when memoryselectimg class is clicked
$('.memoryselectimg').click(function(e) {
	$('.memoryselectimg').css('border', 'none'); // remove all borders
	$(this).css('border', '2px solid #E8272C'); // set border for selected item
	$('#ImageName').value($(this).attr('id')); // set input value
});

[Timms]

Wouldent saves much more time and code looking at the difference but always good to have alternatives