change img src on click

Question

I have searched the forum for one particular issue, yet all the solutions I found do not work for my problem.

I have an image on the left hand side. On the right hand side, I have different words. So, When I click on a particular name, I want the picture to change to whatever picture I have in my image folder. Basically, I want the source of the image to change. Here is the code for my index:

<div id="picture_here">
     <img src="images/mtkili.png" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>

and here are two jqueries formulas I tried:

$('#mtl').click(function(){
    $('#picture').attr()({
        'src':'images/short.png'
    })          
})

and:

$('#mtl').click(function(){
   $('#picture').attr('src', 'images/short.png');
});

The first attempt won't work but the second looks fine. What happens with that one? — j08691
– j08691, Commented Oct 8, 2012 at 14:52
How does the clicked text determine what image should be shown? And what does 'change to whatever image I have in my image folder' mean, in context? — David Thomas
– David Thomas, Commented Oct 8, 2012 at 14:52
The second one works perfectly. jsfiddle.net/rhess Did you include jQuery? — Sebass van Boxel
– Sebass van Boxel, Commented Oct 8, 2012 at 14:53
David Thomas, I have some pictures in a folder. And so when I click on a description (usually one or two words), the picture on the left hand side changes to a picture found in my images folder. — Midevil Chaos
– Midevil Chaos, Commented Oct 8, 2012 at 15:23

gabitzish · Accepted Answer · 2012-10-08 14:56:06Z

19

Your second attempt is correct. Here is the working jsFiddle: http://jsfiddle.net/MEHhs/

So the code should be:

html:

<div id="picture_here">
     <img src="http://www.sbtjapan.com/img/FaceBook_img.jpg" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>

js:

$('#mtl').click(function(){
    $('#picture').attr('src', 'http://profile.ak.fbcdn.net/hprofile-ak-ash3/41811_170099283015889_1174445894_q.jpg');
    });

I've added some existing images found on google.

answered Oct 8, 2012 at 14:56

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Midevil Chaos Over a year ago

Thank you for your input! :D It works nicely. Strangely, yesterday I had the same coding I have now. So I am trying again with my code alongside yours (well, not alongside it, but in a new document), and both codes work, perhaps my two initial documents were corrupted somehow???

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

jsBin demo

Add a class to all your triggers
create images called: mtl.png and contact.png

and use:

<div>
     <div class="button" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" id="contact">SF</div>
</div>

$('.button').click(function(){
   var idToSRC = 'images/'+ this.id +'.png';
   $('#picture').attr('src', idToSRC);
});

While the above will not be user friendly cause there's some latency in loading new images...
A better approach would be to use a single (so-called) sprite image, containing all your desired images, set it as a DIV background image and changing that DIV's "background-position" on click!

USING SPRITES demo 2

Store your desired -left position into a data attribute:

<div id="picture"></div>
<div>
     <div class="button" data-bgpos="68" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" data-bgpos="100" id="contact">SF</div>
</div>

CSS:

#picture{
  width:25px;
  height:25px;
  background:url(/images/sprite.png) no-repeat;
}

Retrieve that data and move the packgroundPosition:

$('.button').click(function(){
  var bgpos = $(this).data('bgpos');
  $('#picture').css({backgroundPosition: -bgpos+' 0'})
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 8, 2012 at 14:54

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

Midevil Chaos Over a year ago

Thank you for your comment. I have never seen the code "data" before. What is this about exactly?

Roko C. Buljan Over a year ago

@MidevilChaos The data attribute is a new useful HTML5 stuff. read more ejohn.org/blog/html-5-data-attributes

Stuart Wakefield · Accepted Answer · 2012-10-08 14:56:14Z

2

It all looks good for the second version, make sure you are wrapping your DOM calls in the document ready function, which can be written as...

$(document).ready(function() {
    ...
});

Or...

$(function() {
    ...
});

So you get...

$(function() {
    $('#mtl').click(function(){
        $('#picture').attr('src', 'images/short.png');
    });
});

answered Oct 8, 2012 at 14:56

Stuart Wakefield

6,40431 silver badges39 bronze badges

2 Comments

Midevil Chaos Over a year ago

Thanks Stuart. That is very good advice for anyone with the same problem, but who haven't added that particular piece of code. Good input! :)

Stuart Wakefield Over a year ago

Thanks, it was a stab in the dark as the second version looked fine and that was the only thing I could think of that would cause it not to work unexpectedly (and not throw an error)

clemens · Accepted Answer · 2018-01-15 07:45:43Z

2

Instead of adding event listeners to each link class you can just use it as an inline function on any link

function changeurl(theurl){
    $('.myimage').attr('src', theurl);
}

https://jsfiddle.net/rabiee3/ftkuub3j/

edited Jan 15, 2018 at 7:45

clemens

17.9k12 gold badges52 silver badges71 bronze badges

answered Jan 15, 2018 at 7:36

Rabie Mohamed

812 silver badges4 bronze badges

Comments

A_Nabelsi · Accepted Answer · 2012-10-08 15:11:23Z

1

The second one works fine but you have to use explicit path instead of relative path:

$('#mtl').click(function(){
$('#picture').attr('src', '/images/short.png');
});

answered Oct 8, 2012 at 15:11

A_Nabelsi

2,57418 silver badges21 bronze badges

Collectives™ on Stack Overflow

change img src on click

5 Answers 5

1 Comment

USING SPRITES demo 2

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related