How to change image on click of another image?

Question

0.00/5 (No votes)

See more:

I have two images in div. one big one,another small.I want change both images on click of another image which is in another div. I am getting only one image change on click that is big one,small image is not changing.
please refer
http://www.houseofblouse.com/design/u-neck-2[^]

Posted 5-Oct-15 21:19pm

Hussain Javed

Add a Solution

Comments

[no name] 6-Oct-15 3:28am

How you are changing the image src through javascript or jQuery. Please provide part of your code.

Hussain Javed 6-Oct-15 3:57am

this my function
function changeImage(){

document.getElementById('toChange').src='images/scrol v neck images/g.png';
document.getElementById('toChange1').src='images/scrol v neck images/g1.png';
document.getElementById('toChange2').src='images/scrol v neck images/g1.png';
document.getElementById('toChange3').src='images/scrol v neck images/g.png';
}
this is the image which i click
<div class="col-md-3" >
<img src="images/scrol v neck images/img1.png" style="width:120%;" />
<p style="text-align:center; padding-top:10px;"> Classic V </p>
</div>
this the div where image is changed
<div class="pad" >

<img src="images/scrol v neck images/g.png" class="vneck_imgbor img-responsive" id="toChange" style="padding-

left:60px;padding-right:50px;" />
<img class="front1" id="tochange2" src="images/scrol v neck images/g1.png" width="50" height="50">
</div>
</div>
<div class="back" style="width:300px;height:1600px;">
<div class="pad">
<img src="images/scrol v neck images/g1.png" class="vneck_imgbor img-responsive" id="toChange1" style="padding-

left:60px;padding-right:50px;" />
<img class="back1" id="tochange3" src="images/scrol v neck images/g.png" width="50" height="50">
</div>
</div>
big image is changing but small image is not changing.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Palash Mondal_ · Answer 1 · 2015-10-05T21:41:00

Solution 1

Please refer to this demo here:
Change image on click with jQuery[^]

It shows in a very easy way how you can achecive it.

Posted 5-Oct-15 21:41pm

Palash Mondal_

Comments

Hussain Javed 6-Oct-15 3:58am

i want to chane another image on click of one image
please refer
http://www.houseofblouse.com/design/u-neck-2[^]

Palash Mondal_ 6-Oct-15 4:26am

It is very difficult for me to figure out the issue here searching the whole app. I see images everywhere. Could you please post a functional example that illustrates your problem on Fiddle[^]. That would really help me to focus on the real issue, then debug and fix it.

Krunal Rohit · Answer 2 · 2015-10-05T22:00:00

Solution 2

JavaScript

$("#img1").click(function() {
    $("#bigImg").attr("src", "your-big-img-src");
    $("#smallImg").attr("src", "your-small-img-src");
});

You mean this ?
Make the necessary changes according to your need. ;)

-KR

Posted 5-Oct-15 22:00pm

Krunal Rohit

Updated 5-Oct-15 22:01pm

v2