JavaScript - Problem With Javascript Image Swap

So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2.

After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button.

Any help would be greatly appreciated.

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

Hi everyone,

I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this...



Here is the CSS I used to create the look of the "buttons"...

Code:

div.btn_workshops {
	background-image: url(../images/btn_workshops_mid.gif);
	background-position: top left;
	background-repeat: repeat-x;
	cursor: pointer;
	height: 22px;
	margin-bottom: 1px;
	width: 330px;
}
div.btn_workshops_lt {
	background-image: url(../images/btn_workshops_lt.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%px;
}
div.btn_workshops_rt {
	background-image: url(../images/btn_workshops_rt.gif);
	background-position: 100% 0;
	background-repeat: no-repeat;
	height: 100%;
	padding: 3px 12px 0px 12px;
	width: 100%px;
}
.hide {
	display: none;
	visibility: hidden;
}
.show {
	display: block;
	visibility: visible;
}

Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript.

Code:

<div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
											</div>
										</div>
									</div>
                                    <div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: October 9, 16, 23, and 30<br />
                                        Hours: 2:30pm - 5:30pm<br />
                                        Tuition: $250</p>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop2')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
											</div>
										</div>
									</div>
                                    <div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: 2/19, 2/26, 3/5, and 3/12<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $275
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop3')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
											</div>
										</div>
									</div>
                                    <div id="workshop3" class="hide">Instructor: Tom Hampton<br />
                                        Dates: August 7 and 14<br />
                                        Time: 9am - 4pm<br />
                                        Tuition: $150
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop4')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
											</div>
										</div>
									</div>
                                    <div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: February 19 - April 23<br />
                                        Time: 6pm - 9pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop5')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
											</div>
										</div>
									</div>
                                    <div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: June 5, 12, 19, and 26<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>

Here is the JavaScript I used to create the expand/collapse effect...

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}

Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information.

Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance.



This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow.



This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again.

Code:

function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together.

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}
function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion.

Thanks for your help!

I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name, and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me?

Thanks in advance for any help given!


Code:

function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}

Code:

 <label>
<select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()">
<option value="/images/thumbnails/image1.jpg">White</option>
<option value="/images/thumbnails/image2.jpg">Blue</option>
<option value="/images/thumbnails/image3.jpg">Green</option>
</select>
</label>

Code:

<div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" />

Lets say I have two images in a box

Code:

<body>

<div id="box">

<img src="image1.jpg" id="image1" width="100" height="100" />
<img src="image2.jpg"  id="image2" width="100" height="100" />

</div>

</body>

When I click on Image1 I want Image2 to get replaced with a new image, called Image3.

So I tried this code:

Code:

var image1 = document.getElementById("image1");
image1.onclick = image1_click ();

function image1_click () {
	new_image= new Image
	new_image = document.getElementById("image2");
	new_image.src="image3.jpg"
}

But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load.

What should I do to make this work?
Thank you.