jQueryを使用して画像ソースを変更する

764

私のDOMは次のようになります。

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

誰かが画像をクリックしたときに、画像の送信元を次のように変更したい <img src="imgx_off.gif">x画像番号1または2を表すwhereます。

これは可能ですか、それとも画像を変更するためにCSSを使用する必要がありますか？

javascript  jquery  image 
— user67033
ソース
jQueryを使用して何かが必要な場合は、jQueryサイクルプラグイン、デモscrollRight（右下の例）を
— 調べてください
43
jQuery（ "＃my_image"）。attr（ "src"、 "first.jpg"）
— manish nautiyal 14
9
jonstjohnの回答を本当に受け入れる必要があります:)質問と回答の両方に対する賛成票の数は、多くの人がこれに遭遇したことを示しています。それは、受け入れられた答えを持っている質問を改善します。
— Xcelled 2014年
4
日付まで、つまり19th July, 2016 15:39 PM、質問の賛成投票数369および@jonstjohnの回答の賛成票数931。しかし、そのような不運、@ OPは後にログインしませんでしたFeb 17 '09 at 2:57。:(そして、@ jonstjohn Answer Unmarkedのままです。
— Nana Partykar 16
@Xcelled、唯一の問題は、jonstjohnの答えが質問に答えないことです。それはマイナーなポイントですが、作成する価値があります。インコの答えを見てみましょう。実際に質問に正しく答えるのはここだけです。
— David Newcomb

回答:

1687

jQueryのattr（）関数を使用できます。たとえば、imgタグidに「my_image」の属性がある場合、次のようにします。

<img id="my_image" src="first.jpg"/>

次にsrc、jQueryを使用して次のように画像のを変更できます。

$("#my_image").attr("src","second.jpg");

これをclickイベントに添付するには、次のように記述します。

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

画像を回転させるには、次のようにします。

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
— ジョンストジョン
ソース
79

画像ソースの変更が画像サイズの成熟などの後のアクションの実行を待機していないときによくある間違いの1つです.load()。画像のロード後にjQuery メソッドを使用して何かを行う必要があります。

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

編集の理由：https : //stackoverflow.com/a/670433/561545

— モーセン
ソース
はい。これでようやくうまくいった。.destroy（）は、ほとんど十分ではありません。すべてのhtmlをNukingし、さまざまなサイズの画像などをスワップアウトするときに、initが実際に機能します。
— Matt J.
特に画像がキャッシュにある場合、ロードは確実に起動しないことに注意してください。jQueryのドキュメントを参照してください。
— Twilite 2014
19

詳細については。次の構文を使用して、広告画像のjqueryでattrメソッドでsrc属性を設定してみます。$("#myid").attr('src', '/images/sample.gif');

このソリューションは便利で機能しますが、パスを変更すると、画像のパスも変更されて機能しなくなります。

この問題の解決策を探しましたが、何も見つかりませんでした。

解決策は、パスの先頭に「\」を置くことです： $("#myid").attr('src', '\images/sample.gif');

このトリックは私にとって非常に便利です。他のユーザーにも役立つことを願っています。

— wphonestudio
ソース
18

jQueryやその他のリソースを殺すフレームワークがある場合-単純なトリックのために各ユーザーが毎回ダウンロードするための多くのKB-だけでなく、ネイティブJavaScript（！）：

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

これは一般的でよりエレガントに書くことができます：

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>
— インコ
ソース
質問を読んだり、要求された答えを出せない人がどれほどいるのか、いつも驚きます。質問が一般的な解決策を探していることが私（そしてあなた）に明白であるように思われました。それでも、他の誰もがそれを完全に見逃しているだけでなく、質問に答えることさえしなかった答えを出すようでした。:(
— デビッドニューコム
17

私は、画像を変更する方法を紹介しますsrcので、あなたはそれがあなたのHTML内にあるすべての画像（あなたの中を回転する画像をクリックしたときに、d1idとc1あなたは2枚の持っているかどうか...特別クラス）以上の画像を自分のHTMLに。

また、ドキュメントの準備ができた後にページをクリーンアップして、最初は1つの画像のみが表示されるようにする方法も示します。

完全なコード

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

内訳

  1. 画像を含むリンクのコピーを作成します（注：リンクのhref属性を利用して機能を追加することもできます。たとえば、各画像の下に作業リンクを表示します）。

        var $images = $("#d1 > .c1 > a").clone();  ;

  2. HTML内の画像の数を確認し、表示されている画像を追跡する変数を作成します。

    var $length = $images.length;
var $imgShow = 0;

  3. 最初の画像のみが表示されるようにドキュメントのHTMLを変更します。他のすべての画像を削除します。

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

  4. 画像リンクがクリックされたときに処理する関数をバインドします。

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    上記のコードの中心は++$imgShow % $length、画像を含むjQueryオブジェクトを循環するために使用しています。++$imgShow % $length最初にカウンターを1つ増やし、次にその数を画像の数で変更します。これにより、結果のインデックスの循環がオブジェクトのインデックスであるから0に維持されます。つまり、このコードは2、3、5、10、または100の画像で機能します...各画像を順番に循環し、最後の画像に到達すると最初の画像から再開します。length-1$images

    さらに、.attr()画像の「src」属性を取得および設定するために使用されます。$imagesオブジェクトの中から要素を選択するために、フォームを使用$imagesしてjQueryコンテキストとして設定します$(selector, context)。次に.eq()、関心のある特定のインデックスを持つ要素のみを選択するために使用します。

3つの画像があるjsFiddleの例


をsrc配列に格納することもできます。
3つの画像があるjsFiddleの例

そして、これが画像の周りのアンカータグからhrefを組み込む方法です：
jsFiddleの例

— ピーター・アイタイ
ソース
17

これがうまくいくことを願っています

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});
— ジーシャン
ソース
このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
— デレクブラウン
ありがとうデレクは次回からこのことを心に留めてくれます
— Zeeshan
14

次のように、イメージタグにid属性を追加する必要があります。 

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

次に、このコードを使用して画像のソースを変更できます。

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
— ビットマップ氏
ソース
9

次の方法でjQueryを使用してこれを行うこともできます。

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

画像ソースに複数の状態がある場合、条件を設定できます。

— フェルナンドエッシャー
ソース
5
この構文は正しくありません。jquery attr（）関数は1つまたは2つのパラメーターを取ります。1つ目はHTML属性名を含む文字列で、2つ目は設定する属性の値です。
— チアゴ・シウバ
7

キャプチャボタンを呼び出すときにも同じ問題が発生しました。いくつかの検索を行った後、以下の関数はほとんどすべての有名なブラウザー（chrome、Firefox、IE、Edge、...）で正常に機能します。

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl'は新しいキャプチャ画像をレンダリングするために使用され、ケースでは無視できます。最も重要な点は、FFとIEに強制的に画像を再レンダリングさせる新しいURLを生成することです。

— カイバン・テラーニ
ソース
7

jQueryを使用して画像ソースを変更する click()

素子：

    <img class="letstalk btn"  src="images/chatbuble.png" />

コード：

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });
— アビジットプージャリ
ソース
7

画像を複数回更新してもキャッシュされて更新されない場合は、最後にランダムな文字列を追加します。

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
— きんつくろい
ソース
1
少なくとも私にとって、最後にランダムな文字列を追加することは非常に重要です！戦車！
— Marcelo Sader
3

今日も同じことを考えています。

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});
— Anyone_ph
ソース
3

これは、バニラ（または単にPure）JavaScriptで実行するための保証された方法です。

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
— レイモンド・ワチャガ
ソース
1

それをさらに小さくするための追加です： 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
— セエル・ラホス
ソース
-1

CSSで画像ソースを変更する方法はありません。

唯一の可能な方法は、JavaScriptまたはjQueryのようなJavaScriptライブラリを使用することです。

論理-

画像はdivの内側にありませんし、何があるclassか、idそのイメージに。

したがって、ロジックはdiv画像が配置されている内の要素を選択することになります。

次に、ループですべての画像要素を選択し、JavaScript / jQueryで画像のsrcを変更します。

デモ出力付きのコード例

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>
スニペットを展開

— アブラー・ジャヒン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.