1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:41 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

JS for swapping images is swapping all of the images

How to control which images JS swaps

         

dbtony

7:43 pm on Mar 22, 2007 (gmt 0)

10+ Year Member



birdbrain posted this code show below to show hide content within adiv tags. It also swaps out a minus sign gif with a plus sign gif. It works great (thanks birdbrain) however, when I use it in an existing page it swaps all of the src image files to the plus sign gif.
How can I modify the javascript to only affect the image files within the divs I want to show and hide?
Thanks in advance,
Tony 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>show/hide info</title> 
<base href="http://mysite.example.co.uk/azygous/"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
<!-- 
.container { 
font-family:verdana,arial,helvetica,sans-serif; 
font-size:16px; 
margin:4px 0; 
} 
.container img { 
vertical-align:bottom; 
} 
.container span { 
font-weight:bold; 
} 
.off { 
display:none; 
} 
.on { 
display:block; 
margin:10px 30px; 
text-align:justify; 
color:#003; 
background-color:#eef; 
} 
--> 
</style> 
<script type="text/javascript"> 
<!-- 
window.onload=function() { 
spn=document.getElementsByTagName('span'); 
for(c=0;c<spn.length;c++) { 
spn[c].onclick=function() { 
if(this.id!='') { 
stuff(this.id.split('s')[1]); 
} 
} 
} 
} 
function stuff(n) { 
dvs=document.getElementsByTagName('div'); 
ims=document.getElementsByTagName('img'); 
info=document.getElementById('div'+n); 
pic=document.getElementById('img'+n); 
for(c=0;c<dvs.length;c++) { 
if((dvs[c].className=='on')&&(dvs[c].id!='div'+n)) { 
dvs[c].className='off'; 
} 
} 
for(c=0;c<ims.length;c++) { 
ims[c].src='images/plus.GIF'; 
} 
if(info.className=='on') { 
info.className='off'; 
pic.src='images/plus.GIF'; 
} 
else { 
info.className='on'; 
pic.src='images/minus.GIF'; 
} 
} 
//--> 
</script> 
</head> 
<body> 
<div class="container"> 
<img id="img0" src="images/plus.GIF" alt=""/> 
<span id="s0">John Smith</span> 
<div id="div0" class="off"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue. 
</div> 
</div> 
<div class="container"> 
<img id="img1" src="images/plus.GIF" alt=""/> 
<span id="s1">frank furter</span> 
<div id="div1" class="off"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue. 
</div> 
</div> 
<div class="container"> 
<img id="img2" src="images/plus.GIF" alt=""/> 
<span id="s2">mary contrary</span> 
<div id="div2" class="off"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue. 
</div> 
</div> 
<div class="container"> 
<img id="img3" src="images/plus.GIF" alt=""/> 
<span id="s3">Joe Bloggs</span> 
<div id="div3" class="off"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue. 
</div> 
</div> 
</body> 
</html>

[edited by: jatar_k at 8:10 pm (utc) on Mar. 22, 2007]
[edit reason] examplified [/edit]

birdbrain

8:34 pm on Mar 22, 2007 (gmt 0)



Hi there dbtony,

here is the code with the modifications highlighted ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>show/hide info</title>
<base href="http://mysite.example.co.uk/azygous/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.container {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
margin:4px 0;
}
.container img {
vertical-align:bottom;
}
.container span {
font-weight:bold;
}
.off {
display:none;
}
.on {
display:block;
margin:10px 30px;
text-align:justify;
color:#003;
background-color:#eef;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {
spn=document.getElementsByTagName('span');
for(c=0;c<spn.length;c++) {
spn[c].onclick=function() {
if(this.id!='') {
stuff(this.id.split('s')[1]);
}
}
}
}
function stuff(n) {
dvs=document.getElementsByTagName('div');[blue]
ims=document.getElementById('wrapper').getElementsByTagName('img');[/blue]
info=document.getElementById('div'+n);
pic=document.getElementById('img'+n);
for(c=0;c<dvs.length;c++) {
if((dvs[c].className=='on')&&(dvs[c].id!='div'+n)) {
dvs[c].className='off';
}
}
for(c=0;c<ims.length;c++) {
ims[c].src='images/plus.GIF';
}
if(info.className=='on') {
info.className='off';
pic.src='images/plus.GIF';
}
else {
info.className='on';
pic.src='images/minus.GIF';
}
}
//-->
</script>
</head>
<body>
[blue]
<div id="wrapper">[/blue]
<div class="container">
<img id="img0" src="images/plus.GIF" alt=""/>
<span id="s0">John Smith</span>
<div id="div0" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>
<div class="container">
<img id="img1" src="images/plus.GIF" alt=""/>
<span id="s1">Frank Furter</span>
<div id="div1" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>
<div class="container">
<img id="img2" src="images/plus.GIF" alt=""/>
<span id="s2">Mary Contrary</span>
<div id="div2" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>
<div class="container">
<img id="img3" src="images/plus.GIF" alt=""/>
<span id="s3">Joe Bloggs</span>
<div id="div3" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div>[blue]
</div>[/blue]
</body>
</html>

birdbrain

[edited by: encyclo at 10:18 pm (utc) on Mar. 22, 2007]
[edit reason] examplified [/edit]

zz_fish

8:40 pm on Mar 22, 2007 (gmt 0)

10+ Year Member



These lines are making all images to plus signs

for(c=0;c<ims.length;c++) {
ims[c].src='images/plus.GIF';
}

deleting them should fix the problem, but depending on what you want to do here, it might not be the best option.

dbtony

10:06 pm on Mar 22, 2007 (gmt 0)

10+ Year Member



birdbrain, your changes did the trick.
Thank you again for the quick response and excelent code.
Tony

birdbrain

10:52 pm on Mar 22, 2007 (gmt 0)



No problem, you're welcome. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:41 pm May 14, 2026