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');
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With