Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

javascript swap images

Posted on 2009-12-18
5
Medium Priority
?
246 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:Neil2526
  • 2
  • 2
5 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26082434
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
 
LVL 22

Expert Comment

by:kadaba
ID: 26082701
the html code would help.
0
 

Author Comment

by:Neil2526
ID: 26082877
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
 
LVL 22

Accepted Solution

by:
kadaba earned 2000 total points
ID: 26083071
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
 

Author Closing Comment

by:Neil2526
ID: 31667843
Thanks man that works perfect!
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question