web-dev-qa-db-ja.com

クリックで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>

そしてここに私が試した2つのjqueries式があります：

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

そして：

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

あなたの2回目の試みは正しいです。これが動作している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で見つかった既存の画像をいくつか追加しました。

16
gabitzish

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

上記はユーザーフレンドリーではありませんが、新しい画像の読み込みに時間がかかります...
より良いアプローチは、単一の（いわゆる）Spriteを使用することです必要なすべての画像を含む画像をDIV背景画像として設定し、クリックでそのDIVの「背景位置」を変更します。

SPRITESデモ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'})
});
4
Roko C. Buljan

各リンククラスにイベントリスナーを追加する代わりに、任意のリンクのインライン関数として使用できます。

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

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

1
Rabie Mohamed

それはすべて2番目のバージョンに適しているように見えます。DOM呼び出しを次のように記述できるdocument ready関数でラップしていることを確認してください...

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

または...

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

だからあなたは...

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

2番目は正常に動作しますが、相対パスではなく明示的なパスを使用する必要があります。

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