By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,818 Members | 2,089 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,818 IT Pros & Developers. It's quick & easy.

Two Images changed when link is clicked

tjc0ol
P: 26
Hi guys,
I have here a javascript code that is capable of changing one background image when link is clicked, it goes:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="javascript">
  2. var bgImg = new Array();
  3.  
  4. bgImg[0] = "images/backpink.jpg";
  5. bgImg[1] = "images/backgreen.jpg";
  6. bgImg[2] = "images/backvoilet.jpg";
  7. bgImg[3] = "images/backblue.jpg";
  8. bgImg[4] = "images/backaqua.jpg";
  9. bgImg[5] = "images/backlightgreen.jpg";
  10. bgImg[6] = "";
  11.  
  12. function selectBgImg(whichImage){
  13.     if (document.body){
  14.          document.body.background = bgImg[whichImage];
  15.     }
  16. }
  17. </script>
and my html as follows:
[html]
<body style="background-repeat:repeat-x">
<div id="colored"><!-- Start BgColor Selector -->
<ul>
<li style="margin-right:2em">Choose Background color:</li>
<li><a href="javascript:selectBgImg(0)">Pink</a></li>
<li><a href="javascript:selectBgImg(1)">Green</a></li>
<li><a href="javascript:selectBgImg(2)">Violet</a></li>
<li><a href="javascript:selectBgImg(3)">Blue</a></li>
<li><a href="javascript:selectBgImg(4)">Aqua</a></li>
<li><a href="javascript:selectBgImg(5)">Light Green</a></li>
<li><a href="javascript:selectBgImg(6)">No Color</a></li>
</ul>
</div><!-- end BgColor Selector -->
<div id="main"><!-- start main -->
<div><img src="images/curvepink.gif" alt="" width="778" height="15" /></div>
<div id="frame"><!--frame start -->
[/html]

Now, I need help in adding a javascript that if a certain link will be clicked the image i.e. [html]<div><img src="images/curvepink.gif" alt="" width="778" height="15" /></div>[/html] will be also changed and match according to its background color..

I have curvepink.gif, curvegreen.gif and so on.. stored in my images folder.
Is this possilbe? How will this be done? Thanks in advance. -tj
Aug 8 '08 #1
Share this Question
Share on Google+
2 Replies


100+
P: 141
Hi,

U can do this by using two methods

Method 1:
Using Div tag

Expand|Select|Wrap|Line Numbers
  1.  
  2. java script :
  3.  
  4. function selectBgImg(whichImage){
  5. var color;
  6.     if (document.body){
  7.          document.body.background = bgImg[whichImage];
  8. switch(whichImage)
  9. {
  10. case 0:
  11. color = "images/curvepink.jpg"
  12. break;
  13. case 1:
  14. color = "images/curvegreen.jpg"
  15. break;
  16. ..........
  17. }
  18.  document.getElementById("main").innerHTML = "<div><img src='" + 
  19. color + "' alt='' /></div>"
  20.     }
  21.  
  22. html:
  23.  
  24. <div id="main"><!-- start main -->
  25.    <div><img src="Winter.jpg" alt=""  /></div>
  26.  
  27.  
Method 2:
using ID
Specify id for the image
Expand|Select|Wrap|Line Numbers
  1. html:
  2.  
  3. <div id="main"><!-- start main -->
  4.    <div><img src="Winter.jpg" alt="" id="images" /></div>
  5. javascript:
  6. function selectBgImg(whichImage){
  7.     if (document.body){
  8.          document.body.background = bgImg[whichImage];
  9. switch(whichImage)
  10. {
  11. case 0:
  12. color = "images/curvepink.jpg"
  13. break;
  14. case 1:
  15. color = "images/curvegreen.jpg"
  16. break;
  17. ..........
  18. }
  19.          document.getElementById("images").src = color;
  20.              }     
  21.  
  22.  
u can use any of the method to solve ur problem
Aug 8 '08 #2

tjc0ol
P: 26
Hi,

U can do this by using two methods

Method 1:
Using Div tag

Expand|Select|Wrap|Line Numbers
  1.  
  2. java script :
  3.  
  4. function selectBgImg(whichImage){
  5. var color;
  6.     if (document.body){
  7.          document.body.background = bgImg[whichImage];
  8. switch(whichImage)
  9. {
  10. case 0:
  11. color = "images/curvepink.jpg"
  12. break;
  13. case 1:
  14. color = "images/curvegreen.jpg"
  15. break;
  16. ..........
  17. }
  18.  document.getElementById("main").innerHTML = "<div><img src='" + 
  19. color + "' alt='' /></div>"
  20.     }
  21.  
  22. html:
  23.  
  24. <div id="main"><!-- start main -->
  25.    <div><img src="Winter.jpg" alt=""  /></div>
  26.  
  27.  
Method 2:
using ID
Specify id for the image
Expand|Select|Wrap|Line Numbers
  1. html:
  2.  
  3. <div id="main"><!-- start main -->
  4.    <div><img src="Winter.jpg" alt="" id="images" /></div>
  5. javascript:
  6. function selectBgImg(whichImage){
  7.     if (document.body){
  8.          document.body.background = bgImg[whichImage];
  9. switch(whichImage)
  10. {
  11. case 0:
  12. color = "images/curvepink.jpg"
  13. break;
  14. case 1:
  15. color = "images/curvegreen.jpg"
  16. break;
  17. ..........
  18. }
  19.          document.getElementById("images").src = color;
  20.              }     
  21.  
  22.  
u can use any of the method to solve ur problem

Thanks for the reply and for sharing your knowledge to us all. -tj
Aug 9 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.