web-dev-qa-db-ja.com

JQueryを使って画像ソースを変更する

私の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>

誰かが画像をクリックしたとき、画像srcを<img src="imgx_off.gif">に変更したいと思います。ここでxは画像番号1または2を表します。

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

javascriptjqueryimage
648
user67033

JQueryの attr（） 関数を使うことができます。たとえば、imgタグのid属性が 'my_image'の場合、次のようにします。

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

それなら、jQueryを使ってあなたの画像のsrcを次のように変更することができます。

$("#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);
    }
});
1509
jonstjohn

イメージソースの変更が、イメージサイズの成熟などのような、後のアクションの実行を待つのではない場合によくある間違いの1つです。イメージロード後にjQueryの.load()メソッドを使用する必要があります。

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

});

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

74
Mohsen

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

この解決法は便利です、そして、それはうまくいきます、しかし、パスを変えるならば、imageのためのパスも変えて、働かない。

私はこの問題を解決するために探していますが、何も見つかりませんでした。

解決策は、パスの先頭に '\'を付けることです。$("#myid").attr('src', '\images/sample.gif');

このトリックは私にとって非常に役に立ち、私はそれが他の人にも役立つことを願っています。

19
wphonestudio

画像srcを変更する方法を紹介します。画像をクリックすると、HTML内のすべての画像（d1 idおよび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. only最初の画像が表示されるように、ドキュメントの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からlength-1オブジェクトのインデックスである$imagesに循環します。これは、このコードが2、3、5、10、または100個の画像で機能することを意味します。各画像を順番に循環し、最後の画像に到達すると最初の画像から再開します。

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

jsFiddleの3つの画像の例


_srcsを配列に保存することもできます。
jsFiddleの3つの画像の例

そして、画像の周りにアンカータグからhrefを組み込む方法は次のとおりです。
jsFiddleの例

17
Peter Ajtai

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>
16
inco

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

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

このようにjQueryでもこれを行うことができます。

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

画像ソースに複数の状態がある場合は条件があります。

9
FernandoEscher

Re captchaボタンを呼び出そうとしたときも同じ問題がありました。いくつかの検索の後、今度は以下の機能が、ほとんどすべての有名なブラウザ（クロム、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
Kayvan Tehrani

私は今日同じような驚きを持っています、私はこのようにしました：

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

これは、Vanilla（または単に純粋な）JavaScriptでそれを成し遂げるための保証された方法です。

var picurl = 'pictures/Apple.png';
document.getElementById("image_id").src=picurl;
2
Raymond Wachaga

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);
        }
    });
2
Abhijit Poojari

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

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
1
Szél Lajos

あなたはこのようにあなたの画像タグに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 () {
        doSomething();
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
0
Ali

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

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

論理-

画像はdiv内にあり、その画像にはclassやidはありません。

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

次に、loopですべてのimages要素を選択し、 Javascript / jQuery でimage 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>
0
Abrar Jahin