getElementsByTagName to change all image borders on a page

crowell · Mar 14, 2003

Does anyone have a suggestion of an efficient way to change borders of all images on a page?
The images are initially added dynamically based on the choices on a previous page, so there is not a fixed number of images to start with, so the quantity of id's will vary.
I would like to be able to select which images will have a border and which will not based on events occurring on the page.
Have this so far:
function pickedpic(pickin)
{
var xxlist = document.getElementsByTagName("img&quot

;
for(i=0;i<xxlist.length;i++) {
var xxholdid = document.getElementById(xxlist.id).style.borderWidth = '0px';
}
pickin.style.borderWidth = '3px';
}
I have tried many variations, but can only get the border of the clicked item to change to 3px. Cannot get all other images to return to a border of 0px.
Must have the object logic mixed up somewhere, and would welcome any suggestions, or an easier way to do this.
Thanks!

crowell · Mar 14, 2003

oops - typo above, here is the actual code as of now:
function pickedpic(pickin)
{
var xxlist = document.getElementsByTagName("img&quot

;
for(i=0;i<xxlist.length;i++) {
document.getElementById(xxlist.id).style.borderWidth = '0px';
}
pickin.style.borderWidth = '3px';
}

(which does not work)

petey · Mar 14, 2003

Maybe this would work? Didn't test it.

Code:

function pickedpic(pickin)
{
var xxlist = document.getElementsByTagName(&quot;img&quot;);
for(i=0;i<xxlist.length;i++)
  {
  xxlist[i].style.borderWidth = '0px';
  }
pickin.style.borderWidth = '3px';
}

petey

http://www.drpeterjones.com/

skurpyun · Mar 14, 2003

Or try toying with this code. I tested it on my computer in both Netscape and IE, and it worked fine. Unfortunately, i just re-wrote my own code for it, not using your original code. Sorry...it's friday and i'm dying to get out of the office!
anyway, mess with this code and it should give you some idea how to make yours work. G'luck.

here's the whole thing:

Code:

<html>
<head>
<title>Untitled</title>
<script language=&quot;JavaScript&quot;>
<!--
//function to change the image border
function changeborder(){
	//declare variables
	var arr, bordervalue;
	
	//initialize variable
	bordervalue = 0;
	
	//get image tags and put into 'arr' array
	arr = document.getElementsByTagName(&quot;img&quot;);
	
	//loop through img tag array 'arr'
	for(var i=0; i < arr.length; i++){
		//get border value
		bordervalue = arr[i].border;
		//set new border value
		arr[i].border = bordervalue + 10;
	}
//function ends
}

//-->
</script>
</head>

<body>

<br>
<img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; width=&quot;22&quot; height=&quot;12&quot; border=&quot;1&quot; name=&quot;a&quot;>
<br>
<img src=&quot;images/print.gif&quot; alt=&quot;&quot; width=&quot;83&quot; height=&quot;69&quot; border=&quot;2&quot; name=&quot;b&quot;>
<br>
<img src=&quot;images/error.gif&quot; alt=&quot;&quot; width=&quot;127&quot; height=&quot;84&quot; border=&quot;3&quot; name=&quot;c&quot;>
<br>
<input type=&quot;button&quot; value=&quot;Click Me!&quot; onclick=&quot;changeborder();&quot;>

</body>
</html>

PerryRhodan · May 28, 2003

Your logic seems right, you're just missing something...
you forgot xxlist's index. correct the below line:

var xxholdid = document.getElementById(xxlist.id).style.borderWidth = '0px';

didn't test, but if this doesn't work, it probably has another problem like this...
luck,
PR aka MSB

PerryRhodan · May 28, 2003

sorry. the correct line shoud be:

var xxholdid = document.getElementById(xxlist[ i ].id).style.borderWidth = '0px';

i'm new to this site...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

getElementsByTagName to change all image borders on a page

crowell

Programmer

crowell

Programmer

petey

Programmer

skurpyun

Programmer

PerryRhodan

Programmer

PerryRhodan

Programmer

Similar threads

Part and Inventory Search

Sponsor