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, Oct 08 '12 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, Oct 08 '12 at 14:52
The second one works perfectly. http://jsfiddle.net/rhess/ Did you include jQuery? — Sebass van Boxel, Oct 08 '12 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, Oct 08 '12 at 15:23

score 19 · Accepted Answer · answered Oct 08 '12 at 14:56

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.

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??? — Midevil Chaos, Oct 08 '12 at 15:19

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

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'})
});

Thank you for your comment. I have never seen the code "data" before. What is this about exactly? — Midevil Chaos, Oct 08 '12 at 15:27
@MidevilChaos The data attribute is a new useful HTML5 stuff. read more http://ejohn.org/blog/html-5-data-attributes/ — Roko C. Buljan, Oct 08 '12 at 15:38

score 2 · Answer 3 · answered Oct 08 '12 at 14:56

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 08 '12 at 14:56

Stuart Wakefield

6,294
24
35

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! :) – Midevil Chaos Oct 08 '12 at 15:25
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) – Stuart Wakefield Oct 08 '12 at 15:29

score 2 · Answer 4 · edited Jan 15 '18 at 07:45

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 '18 at 07:45

clemens

16,716
11
50
65

answered Jan 15 '18 at 07:36

Rabie Mohamed

41
4

score 1 · Answer 5 · answered Oct 08 '12 at 15:11

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 08 '12 at 15:11

A_Nabelsi

2,524
18
21

change img src on click

5 Answers5

USING SPRITES demo 2

Linked

Related