Jump to content

onclick unchange previous


supermerc

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>";
?>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>";

?>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

}


}

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;
   }
   
   
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.