Изменить img src на клик

Я искал форум для одной конкретной проблемы, но все решения, которые я нашел, не работают для моей проблемы.

У меня есть изображение с левой стороны. С правой стороны у меня разные слова. Итак, когда я нажимаю на определенное имя, я хочу, чтобы изображение изменилось на любое изображение, которое у меня есть в папке с изображениями. В принципе, я хочу, чтобы источник изображения изменился. Вот код для моего индекса:

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

Ответы

Ответ 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');
    });

Я добавил некоторые существующие изображения, найденные в google.

Ответ 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 на клик!

ИСПОЛЬЗОВАНИЕ 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;
}

Извлеките эти данные и переместите пакетное положение.

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

Ответ 3

Все выглядит хорошо для второй версии, убедитесь, что вы завершаете свои DOM-вызовы в функции готовности документа, которые могут быть записаны как...

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

Или...

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

Итак, вы получаете...

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

Ответ 4

Вместо добавления прослушивателей событий в каждый класс ссылок вы можете просто использовать его как встроенную функцию для любой ссылки

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

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

Ответ 5

Второй работает отлично, но вы должны использовать явный путь вместо относительного пути:

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