的 USING SPRITES demo 2

Question

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

我的左侧有一张图片。在右边，我有不同的词。因此，当我点击某个特定名称时，我希望图片更改为我在图像文件夹中的任何图片。基本上，我希望图像的来源发生变化。这是我索引的代码：

<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公式：

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

和

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

Answer 1

你的第二次尝试是正确的。这是工作的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');
    });

我添加了一些在谷歌上发现的现有图片。

Answer 2

<强> jsBin demo

为所有触发器添加课程
创建名为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的“背景位置”！

的 USING SPRITES demo 2

将您想要的左侧位置存储到数据属性中：

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

检索该数据并移动packgroundPosition：

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

Answer 3

对于第二个版本看起来都很好，请确保将DOM调用包装在文档就绪函数中，该函数可以写成...

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

或者...

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

所以你得到......

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

Answer 4

您可以在任何链接上将其用作内联函数，而不是向每个链接类添加事件侦听器

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

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

Answer 5

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

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

点击即可更改img src

5 个答案:

的 USING SPRITES demo 2