点击即可更改img src [英] change img src on click

问题描述

我在论坛上搜索了一个特定的问题，但我找到的所有解决方案都不能解决我的问题。

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>

这里是我试过的两个jqueries公式：

and here are two jqueries formulas I tried:

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

和：

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

推荐答案

您的第二次尝试是正确的。这是工作的jsFiddle： http://jsfiddle.net/MEHhs/

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

所以代码应该是：

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.

这篇关于点击即可更改img src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！