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:

Expand|Select|Wrap|Line Numbers

 <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="background-repeat:repeat-x">
<div id="colored">
<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>
<div id="main">
<div><img src="images/curvepink.gif" alt="" width="778" height="15" /></div>
<div id="frame">
[/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

Subscribe Post Reply

1461

vee10

141

100+

Hi,

U can do this by using two methods

Method 1:
Using Div tag

Expand|Select|Wrap|Line Numbers

  
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

Expand|Select|Wrap|Line Numbers

 
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

Aug 8 '08 #2

tjc0ol

Hi,

U can do this by using two methods

Method 1:
Using Div tag

Expand|Select|Wrap|Line Numbers

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">

   <div><img src="Winter.jpg" alt=""  /></div>

Method 2:
using ID
Specify id for the image

Expand|Select|Wrap|Line Numbers

html:

<div id="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

Aug 9 '08 #3

Similar topics

Creating an AVI from JPEG images

by: Derek | last post by:

I wanted to know if anyone had any insight or sample code of creating an AVI file from a directory of JPEG images. I have read the thread that that speaks about creating a MOV file from JPEG images...

Java

Swapping images causes blanks....

by: Jon Glazer | last post by:

I know this is sorta reposting but I want to simplify the issue a bit. Take the following script: function replacemain(s){ var x = document.images; var y = document.images; var pictemp =...

Javascript

IE.6 shows blank images sporadically

by: Trent | last post by:

Hey All, I am new to javascript and currently coding a site with scripts that are beyond my level of understanding. The problematic page has thumbnail images that can be clicked on to zoom in....

Javascript

Show light weight thumbnail of large images

by: moondaddy | last post by:

I have an app where users will upload photos to their shopping cart. When they review their cart I need to include a light weight thumbnail of the image they uploaded. how can I take the image a...

ASP.NET

Images in ASPX

by: trinitypete | last post by:

Hi, I have a picture gallery type application that loads up several photographs, due to the file sizes of the images the page load is slow - Yes I know I need to thumbnail and reduce image for...

ASP.NET

Is This Possible ... ?

by: Wayne Smith | last post by:

I've come up against a major headache that I can't seem to find a solution for but I'm sure there must be a workaround and I would really be grateful of any help. I'm currently building a web...

ASP.NET

how to change images based on action.Even clicking changed images should do respective actions?

by: vj | last post by:

how to change images based on action. Even clicking changed images should do respective actions. and while displaying only one image at a time sholud get displayed. I am using three images for a...

Javascript

Tab Images switch on tab menu click

by: JoJo | last post by:

I followed along in Jeremy Keith's book "DOM Scripting" on how to make a image viewer that changes on clicking links. It is up for demo at: http://jojowebdesign.com/dom1.html My question is...

Javascript

trouble with tinyMCE images

by: matheussousuke | last post by:

Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++