フォーラムで特定の問題を検索しましたが、見つかったすべての解決策が私の問題に対して機能しません。
左側に画像があります。右側には別の言葉があります。したがって、特定の名前をクリックすると、画像が自分の画像フォルダにある任意の画像に変更されます。基本的に、画像のソースを変更したい。これが私のインデックスのコードです:
<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');
});
あなたの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で見つかった既存の画像をいくつか追加しました。
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の「背景位置」を変更します。
希望する左位置をデータ属性に保存します。
<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'})
});
各リンククラスにイベントリスナーを追加する代わりに、任意のリンクのインライン関数として使用できます。
function changeurl(theurl){
$('.myimage').attr('src', theurl);
}
それはすべて2番目のバージョンに適しているように見えます。DOM呼び出しを次のように記述できるdocument ready関数でラップしていることを確認してください...
$(document).ready(function() {
...
});
または...
$(function() {
...
});
だからあなたは...
$(function() {
$('#mtl').click(function(){
$('#picture').attr('src', 'images/short.png');
});
});
2番目は正常に動作しますが、相対パスではなく明示的なパスを使用する必要があります。
$('#mtl').click(function(){
$('#picture').attr('src', '/images/short.png');
});