点击更改图片的src属性

Question

点击更改图片的src属性

15

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

我有一张图片在左边，右边是不同的文字。当我点击特定的名字时，我希望图片更改成我在图像文件夹中拥有的任何图片。基本上，我想要更改图片的源。这是我的主页代码：

<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>

这里有两个我尝试过的jQuery公式：

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

并且：

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

- Midevil Chaos

5

第一次尝试不起作用，但第二次看起来很好。那个会发生什么？ - j08691

是的，第二次尝试应该会成功。 - abhijit

点击的文本如何确定应该显示哪个图像？在上下文中，“更改为我在图像文件夹中拥有的任何图像”是什么意思？ - David Thomas

2

第二个完美运行。http://jsfiddle.net/rhess/ 你有包含jQuery吗？ - Sebass van Boxel

David Thomas，我有一些图片在一个文件夹里。当我点击一个描述（通常是一两个单词）时，左侧的图片会更改为在我的图像文件夹中找到的图片。 - Midevil Chaos

5个回答

4

jsBin演示

为所有触发器添加一个类
创建名为mtl.png和contact.png的图片

并使用：

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

虽然以上方法在加载新图像时会有一些延迟，因此不太用户友好...
更好的方法是使用单个（所谓的）雪碧图像，其中包含所有所需的图像，将其设置为DIV背景图像，并在单击时更改该DIV的“background-position”！

使用雪碧图演示2

将所需的-left位置存储到数据属性中：

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

获取该数据并移动背景位置:

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

- Roko C. Buljan

谢谢您的评论。我以前从未见过“data”这个代码。这是关于什么的？ - Midevil Chaos

@MidevilChaos 数据属性是HTML5中一个新的有用的东西。阅读更多信息请访问http://ejohn.org/blog/html-5-data-attributes/。 - Roko C. Buljan

2

不需要为每个链接类添加事件监听器，您可以将其作为内联函数在任何链接上使用

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

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

- Rabie Mohamed

2

第二个版本看起来很不错，确保将你的DOM调用封装在文档就绪函数中，可以写成...

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

或者...

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

So you get...

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

- Stuart Wakefield

谢谢Stuart。对于有同样问题但尚未添加该特定代码的任何人来说，这是非常好的建议。好的输入！ :) - Midevil Chaos

谢谢，这只是一次猜测，因为第二个版本看起来很好，而且我能想到的唯一可能导致它出现意外情况（而不会抛出错误）的原因就是这个。 - Stuart Wakefield

1

第二个可以正常工作，但是您必须使用显式路径而不是相对路径：

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

- A_Nabelsi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gabitzish · Accepted Answer

你的第二次尝试是正确的。下面是可工作的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:

->

JavaScript：

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

我已经添加了在谷歌上找到的一些现有图片。