Two Images changed when link is clicked

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tjc0ol
    New Member
    • Nov 2007
    • 26
    #1

    Two Images changed when link is clicked

    Hi guys,
    I have here a javascript code that is capable of changing one background image when link is clicked, it goes:
    Code:
    <script type="text/javascript" language="javascript">
var bgImg = new Array();

bgImg[0] = "images/backpink.jpg";
bgImg[1] = "images/backgreen.jpg";
bgImg[2] = "images/backvoilet.jpg";
bgImg[3] = "images/backblue.jpg";
bgImg[4] = "images/backaqua.jpg";
bgImg[5] = "images/backlightgreen.jpg";
bgImg[6] = "";

function selectBgImg(whichImage){
	if (document.body){
		 document.body.background = bgImg[whichImage];
	}
}
</script>
    and my html as follows:
    [html]
    <body style="backgrou nd-repeat:repeat-x">
    <div id="colored">< !-- Start BgColor Selector -->
    <ul>
    <li style="margin-right:2em">Choo se Background color:</li>
    <li><a href="javascrip t:selectBgImg(0 )">Pink</a></li>
    <li><a href="javascrip t:selectBgImg(1 )">Green</a></li>
    <li><a href="javascrip t:selectBgImg(2 )">Violet</a></li>
    <li><a href="javascrip t:selectBgImg(3 )">Blue</a></li>
    <li><a href="javascrip t:selectBgImg(4 )">Aqua</a></li>
    <li><a href="javascrip t:selectBgImg(5 )">Light Green</a></li>
    <li><a href="javascrip t: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
    Tags: None
    • vee10
      New Member
      • Oct 2006
      • 141
      #2
      Hi,

      U can do this by using two methods

      Method 1:
      Using Div tag

      Code:
      java script :

function selectBgImg(whichImage){
var color;
    if (document.body){
         document.body.background = bgImg[whichImage];
switch(whichImage)
{
case 0:
color = "images/curvepink.jpg"
break;
case 1:
color = "images/curvegreen.jpg"
break;
..........
}
 document.getElementById("main").innerHTML = "<div><img src='" + 
color + "' alt='' /></div>"
    }

html:

<div id="main"><!-- start main -->
   <div><img src="Winter.jpg" alt=""  /></div>
      Method 2:
      using ID
      Specify id for the image
      Code:
      html:

<div id="main"><!-- start main -->
   <div><img src="Winter.jpg" alt="" id="images" /></div>
javascript:
function selectBgImg(whichImage){
    if (document.body){
         document.body.background = bgImg[whichImage];
switch(whichImage)
{
case 0:
color = "images/curvepink.jpg"
break;
case 1:
color = "images/curvegreen.jpg"
break;
..........
}
         document.getElementById("images").src = color;
             }
      u can use any of the method to solve ur problem

        Comment

        • tjc0ol
          New Member
          • Nov 2007
          • 26
          #3
          Originally posted by vee10
          Hi,

          U can do this by using two methods

          Method 1:
          Using Div tag

          Code:
          java script :

function selectBgImg(whichImage){
var color;
    if (document.body){
         document.body.background = bgImg[whichImage];
switch(whichImage)
{
case 0:
color = "images/curvepink.jpg"
break;
case 1:
color = "images/curvegreen.jpg"
break;
..........
}
 document.getElementById("main").innerHTML = "<div><img src='" + 
color + "' alt='' /></div>"
    }

html:

<div id="main"><!-- start main -->
   <div><img src="Winter.jpg" alt=""  /></div>
          Method 2:
          using ID
          Specify id for the image
          Code:
          html:

<div id="main"><!-- start main -->
   <div><img src="Winter.jpg" alt="" id="images" /></div>
javascript:
function selectBgImg(whichImage){
    if (document.body){
         document.body.background = bgImg[whichImage];
switch(whichImage)
{
case 0:
color = "images/curvepink.jpg"
break;
case 1:
color = "images/curvegreen.jpg"
break;
..........
}
         document.getElementById("images").src = color;
             }
          u can use any of the method to solve ur problem

          Thanks for the reply and for sharing your knowledge to us all. -tj

            Comment

            Previous template Next
            Working...