onclick unchange previous

[supermerc]

Hey a bunch of images in a table and they all act as a radio button, when you click on it it selects that image as the selected radio button and changes the image border to red to show that its selected.

 

The problem is, if he then click on another image to select it, the previous image is still selected, how do I make it so if they select a new image, the other one goes back to its original settings?

 

here is my javascript function

 

function selectItem(divid){
var item_border = document.getElementById('v_item_border'+divid);
var item_box = document.getElementById(divid);

if(item_box.checked == true)
{
	item_box.checked = false;
	item_border.style.border="0px";
}
else
{
	item_box.checked = true;
	item_border.style.border="2px solid #cc0000";
	prevId = divid;
}


}

 

Thanks

[Ken2k7]

Well, I don't know how your HTML layout is, but give each image a class instead of an id. Use CSS to style the image using that class name so you don't have to do it via JavaScript. So have 2 class names - img_unselected and img_selected. You can name then whatever you want. But for the code below, I'll use them.

 

<script type="text/javascript">
var selected_image = null;
var imgs = document.getElementsByTagName("img");
for (var e = imgs.length; --e > -1; ) {
     if (imgs[e].className === "img_unselected") {
          imgs[e].onclick = function () {
               if (selected_image !== null) selected_image.className = "img_unselected";
               this.className = "img_selected";
               selected_image = this;
          };
     }
}
</script>

 

Understand the code?

[supermerc]

eum no i dont really understand, where is the part that changes the border .. and I dont really understand classes

 

here is my code portion where they apear

 

<?php
echo "<td width=\"30\" height=\"30\" align=\"center\" valign=\"middle\" style=\"background-image:url(http://quiver.outwar.com/images/crewup/vault_tile.gif); width:30px; height:30px;padding:3px;\">
	                					                				<input type=\"radio\" style=\"display:none;\"  name=\"item\" id=\"".$get_row['itemid']."\" value=\"".$get_row['itemid']."\"><img id=\"v_item_border".$get_row['itemid']."\" src=\"http://quiver.outwar.com/images/".$get_row['spath']."\" style=\"border:0px;margin:0px;width:24px;height:24px;\" onmouseover=\"popPreview('".$get_row['spath']."', '".$get_row['name']."', '".$other['value']."', '".$other['slot']."');\" onmouseout=\"popGoAway();\" onClick=\"selectItem(".$get_row['itemid'].");\"\">
	                					                		</td>";
?>

[KevinM1]

eum no i dont really understand, where is the part that changes the border .. and I dont really understand classes

 

Are you familiar with CSS at all?  Ken's solution relies on CSS to function.  His code, broken down:

 

var selected_image = null;

 

Initially set the selected image to null, as nothing's been selected yet.

 

var imgs = document.getElementsByTagName("img");

 

Obtain all of the images (<img ... />) on the page.

 

for (var e = imgs.length; --e > -1; ) {

 

Loop through them all (a clearer way of writing this would be:

 

for(var i = 0, var imgCount = imgs.length; i < imgCount; i++){

)

 

Then...

 

     if (imgs[e].className === "img_unselected") {

 

If the image we're currently at is supposed to be part of this functionality

 

          imgs[e].onclick = function () {

 

Add a function to its onclick event.  That function does the following:

 

               if (selected_image !== null) selected_image.className = "img_unselected";

 

If there's another image that's been selected already, set it back to normal.  Then...

 

               this.className = "img_selected";
               selected_image = this;
          };
     }
}

 

Tell the current image to set its border, and store a reference to it so we know which image to 'turn off' if another is clicked.

 

here is my code portion where they apear

 

<?php
echo "<td width=\"30\" height=\"30\" align=\"center\" valign=\"middle\" style=\"background-image:url(http://quiver.outwar.com/images/crewup/vault_tile.gif); width:30px; height:30px;padding:3px;\">
	                					                				<input type=\"radio\" style=\"display:none;\"  name=\"item\" id=\"".$get_row['itemid']."\" value=\"".$get_row['itemid']."\"><img id=\"v_item_border".$get_row['itemid']."\" src=\"http://quiver.outwar.com/images/".$get_row['spath']."\" style=\"border:0px;margin:0px;width:24px;height:24px;\" onmouseover=\"popPreview('".$get_row['spath']."', '".$get_row['name']."', '".$other['value']."', '".$other['slot']."');\" onmouseout=\"popGoAway();\" onClick=\"selectItem(".$get_row['itemid'].");\"\">
	                					                		</td>";
?>

 

Ken's solution also has the benefit of not needing the onclick event to be written directly in the image's HTML.

 

But, like I first said, Ken's solution requires knowledge of CSS to work.  Let us know if you need a crash course on it.

[supermerc]

i know little,

 

but if i were to take a guess id say

 

#image_unselected {

border:0px;

}

#image_selected {

border: 2px solid #cc0000;

}

 

That is a guess, like i said im not very good at it. Also you said

var imgs = document.getElementsByTagName("img");

loops through all the image on the page, well there are some images on the page where I dont want for them to be able to be selected, i just want the images within the area of code I showed.

[Ken2k7]

Change # to . for classes.

 

var imgs = document.getElementsByTagName("img");

That doesn't loop at all. It just selects all the elements with node name img. The for loop loops through all the images on the page, checks if it has the class name img_unselected, and if so, change it. You'll have to add the class name img_unselected to each image.

[supermerc]

mmm, it doesnt work.

 

Just to recap right now I have

 

var selected_image = null;
var imgs = document.getElementsByTagName("img");
for (var e = imgs.length; --e > -1; ) {
     if (imgs[e].className === "img_unselected") {
          imgs[e].onclick = function () {
               if (selected_image !== null) selected_image.className = "img_unselected";
               this.className = "img_selected";
               selected_image = this;
          };
     }
}

.image_unselected {
border:0px;
}
.image_selected {
border: 2px solid #cc0000;
}

<?php
echo "<td width=\"30\" height=\"30\" align=\"center\" valign=\"middle\" style=\"background-image:url(http://quiver.outwar.com/images/crewup/vault_tile.gif); width:30px; height:30px;padding:3px;\">
	                					                				<input type=\"radio\" name=\"item\" id=\"".$get_row['itemid']."\" value=\"".$get_row['itemid']."\"><img class=\"img_unselected\" id=\"v_item_border".$get_row['itemid']."\" src=\"http://quiver.outwar.com/images/".$get_row['spath']."\" style=\"border:0px;margin:0px;width:24px;height:24px;\" onmouseover=\"popPreview('".$get_row['spath']."', '".$get_row['name']."', '".$other['value']."', '".$other['slot']."');\" onmouseout=\"popGoAway();\" onClick=\"selectItem(".$get_row['itemid'].");\"\">
	                					                		</td>";

?>

[Ken2k7]

0. Use proper xHTML. That should go without saying.

1. JavaScript in script tag.

2. CSS in style tag.

3. Class names I used are img_unselected and img_selected, not image_unselected and image_selected. If you're going to change it, change it in my code as well. Take out the onclick from the HTML.

[supermerc]

0 => What do you mean proper xhtml?

1 & 2 => I use them in my real page i was just copying and pasting the relevant parts of my script for this issue.

3 => Oups, fixed it, but still doesnt work.

[Ken2k7]

Put the script at the bottom of the page.

[supermerc]

oh sorry i didnt see that last part of number 3, the onclick part of the html does something tho, it selects the image for the ratio button

 

function selectItem(divid){
var item_border = document.getElementById('v_item_border'+divid);
var item_box = document.getElementById(divid);

if(item_box.checked == true)
{
	item_box.checked = false;

}
else
{
	item_box.checked = true;

}


}

[Ken2k7]

Oh wait, you don't even have an image to work with. I guess you'll have to change my code to use input boxes instead.

[supermerc]

yea I do have an image to work with, i click on the image and it selects the radio button accordingly thx to the function i showed you before.

[supermerc]

?

[Ken2k7]

Background images aren't clickable. So you'll have to use input boxes, which gets a bit tricky, but if your HTML stays that way, then this should work -

 

Again, use img_unselected and img_selected, which I think you already have there.

<script type="text/javascript">
var selected_input = null;
var inputs = document.getElementsByTagName("input");
for (var e = inputs.length; --e > -1; ) {
     if (inputs[e].className === "img_unselected") {
          inputs[e].onclick = function () {
               if (selected_input !== null) selected_input.parentNode.className = "img_unselected";
               this.parentNode.className = "img_selected";
               this.checked = "checked";
               selected_input = this;
          };
     }
}
</script>

[supermerc]

It doesnt work.

 

I dont think its a background image because as I said before, my original script works to change the border, its just when a new one is clicked i need the previous to go away. Here Ill show you an example of my page with my original script so you know what I mean.

 

Original script

 

function selectItem(divid){
   var item_border = document.getElementById('v_item_border'+divid);
   var item_box = document.getElementById(divid);

   if(item_box.checked == true)
   {
      item_box.checked = false;
      item_border.style.border="0px";
   }
   else
   {
      item_box.checked = true;
      item_border.style.border="2px solid #cc0000";
      prevId = divid;
   }
   
   
}

 

http://pulse.comxa.com/crew_vault.php

[supermerc]

?

[RichardRotterdam]

What you could do is set all the borders of the images to 0px besides the one that you clicked.

[Ken2k7]

What you could do is set all the borders of the images to 0px besides the one that you clicked.

It's a background image.

[RichardRotterdam]

Hope the following is what you were looking for. I added a function getElementsByClass to keep it vanilla js since you prob had a reason not to use a js framework. I added comments so you can see what it does

//get all images by class
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
	node = document;
if ( tag == null )
	tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
	if ( pattern.test(els[i].className) ) {
		classElements[j] = els[i];
		j++;
	}
}
return classElements;
}
function selectItem(divid){
   var item_border = document.getElementById('v_item_border'+divid);
   var item_box = document.getElementById(divid);
   //get all the images 
   var all_images=getElementsByClass("img_unselected",null,"img");
   //loop through all image elements having class img_unselected and remove the border
   for(var i=0;i<all_images.length;i++){
all_images[i].style.border="0px";
   }
   if(item_box.checked == true)
   {
      item_box.checked = false;
      item_border.style.border="0px";
   }
   else
   {
      item_box.checked = true;
      item_border.style.border="2px solid #cc0000";
      prevId = divid;
   }
   
   
}

[supermerc]

Sorry this is pretty late but I had given up on it for a bit I was tired of working on this and not working but I decided to check up on it and your code works perfectly Kat, thanks a lot!