javascript swap images

I have an image on a page that when I click on it, it changes to another image as planned. However I want to add 7 more images that do the same thing. I know that I could just copy the JavaScript 7 times and edit them but I was looking for a shorter way to do this.

anyone have any ideas?

thanks.
<SCRIPT LANGUAGE=JavaScript>

intImage = 2;

function swapImage() {

switch (intImage) {

 case 1:

   document.IMG1.src = "img/offer_selectbutton_unsel.gif"
   document.getElementById('offer_unsel').className="offer"

   intImage = 2

   return(false);

case 2:

   document.IMG1.src = "img/offer_selectbutton_sel.gif"
   document.getElementById('offer_unsel').className="offer_bg_sel"
   intImage = 1

   return(false);

 }

}

</SCRIPT>

Open in new window

Neil2526Asked:
Who is Participating?
 
kadabaCommented:
going by your words...
>> look just like this. So there will be a total of 8 images named offer_selectbutton_unsel.gif
and assuming that you will be keeping the layout of the div same for all the eight divs....

I coded this way.. have few comments too. please go through.

<html>
<head>
<script type="text/javascript">
function swapImage(imgObj)
{
	var divObj = imgObj.parentNode.parentNode.parentNode;
	// imgObj.parentNode will give you div with class name offer_selectbutton
	// imgObj.parentNode.parentNode will give you div with class offer_left_col
	// imgObj.parentNode.parentNode will give you div with class offer
	if(divObj.className == "offer")
	{
		imgObj.src = "img/offer_selectbutton_sel.gif";
		divObj.className = "offer_bg_sel";
	}
	else
	{
		imgObj.src = "img/offer_selectbutton_unsel.gif"
		divObj.className = "offer";
	}
}
</script>
</head>
<body>
<div id="sponsor_offers">
    <div class="offer" id="offer_unsel">
		<div class="offer_left_col">
            <div class="offer_product_image">
				<img src="products/img/ar_mebe.jpg"/>
			</div>
			<div class="offer_selectbutton">
				<img id="IMG1" name="IMG1" src="img/offer_selectbutton_unsel.gif" onclick="swapImage(this);"/>
			</div>
		</div>
		<div class="offer_right_col">
			<ul>
				<li>text here </li>
				<li>text here</li>
				<li>text here</li>
			</ul>
			<p class="offer_price">Pay $1</p>
                <a href="javascript:;" onClick="window.open('products/ar_mebe.html','Offer','width=490px,height=800px,menubar=no,resizable=no,scrollbars=no');">Click To Learn More				</a>
		</div>  
	</div>
	<div class="offer" >
		<div class="offer_left_col">
			<div class="offer_product_image">
				<img src="products/img/ar_ai.jpg"/>
			</div>
			<div class="offer_selectbutton">
				<img id="IMG2" name="IMG2" src="img/offer_selectbutton_unsel.gif" onclick="swapImage(this);"/>
			</div>
		</div>
		<div class="offer_right_col">
			<ul>
				<li>text here</li>
				<li>text here</li>
				<li>text here</li>
			</ul>
			<p class="offer_price">Pay $1</p>
				<a href="javascript:;" onClick="window.open('products/ar_ai.html','Offer','width=490px,height=800px,menubar=no,resizable=no,scrollbars=no');">Click To Learn More	 				 </a>
		</div>  
	</div>
</div>
</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Pass the img id and try this - not sure about the className part since I do not have your code

<SCRIPT LANGUAGE=JavaScript>
var saveImage ="";
function swapImage(img) {
  if (saveImage) {
   document.getElementById(saveImage+'_unsel').className=daveImage+"_bg_sel"
  }
  document.IMG1.src = "img/"+img+"_selectbutton_unsel.gif"
  document.getElementById(img+'_unsel').className="";
  saveImage=img;
  return false ;
}

</SCRIPT>

Open in new window

0
 
kadabaCommented:
the html code would help.
0
 
Neil2526Author Commented:
Below is part of the html. So I have the image offer_selectbutton_unsel.gif, and when clicked changes to offer_selectbutton_sel.gif  . I have 4 rows and 2 columns that look just like this. So there will be a total of 8 images named offer_selectbutton_unsel.gif that I want to change to offer_selectbutton_sel.gif when clicked, but each separately. I also change the class that has a different background image but I will worry about that later. Does any of this make sense?
<div id="sponsor_offers">

			<div class="offer" id="offer_unsel">

				<div class="offer_left_col">

					<div class="offer_product_image"><img src="products/img/ar_mebe.jpg"/></div>

					<div class="offer_selectbutton"><img id="IMG1" name="IMG1" src="img/offer_selectbutton_unsel.gif" onclick="swapImage();"/></div>

				</div>

				<div class="offer_right_col">

					<ul>

						<li>text here </li>

						<li>text here</li>

						<li>text here</li>

					</ul>

					<p class="offer_price">Pay $1</p>

					<a href="javascript:;" onClick="window.open('products/ar_mebe.html','Offer','width=490px,height=800px,menubar=no,resizable=no,scrollbars=no');">Click To Learn More</a>

				</div>	

			</div>



			<div class="offer" >

				<div class="offer_left_col">

					<div class="offer_product_image"><img src="products/img/ar_ai.jpg"/></div>

					<div class="offer_selectbutton"><img id="IMG2" name="IMG2" src="img/offer_selectbutton_unsel.gif" onclick="swapImage();"/></div>

				</div>

				<div class="offer_right_col">

					<ul>

						<li>text here</li>

						<li>text here</li>

						<li>text here</li>

					</ul>

					<p class="offer_price">Pay $1</p>

					<a href="javascript:;" onClick="window.open('products/ar_ai.html','Offer','width=490px,height=800px,menubar=no,resizable=no,scrollbars=no');">Click To Learn More</a>

				</div>	

			</div>

Open in new window

0
 
Neil2526Author Commented:
Thanks man that works perfect!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.