Question 35689 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to change image with jquery

How can I change an image after running a jquery function? I have an slideToggle function connected to the click of a div element containing the text and the image of an arrow, which I want to change into a different image when clicked.

HTML

<div id="italia">
    CONCESSIONI NAZIONALI<img id="freccia" src="freccia_su.jpg"  >
</div>

JQUERY

$("#nazione").click(function(){
    $(".estero").slideToggle("slow", function() { 
        
     });
});

I tried adding this statement, but it doesn’t work:

$('#freccia').attr('src','freccia_giu.jpg');
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    $(document).on("click", "#italia", function() {
  if ($("#freccia").attr("src") == ("file://devil/backup_dipendenti/DEV_CONTOGIOCO/clienti/freccia_su.jpg")) {
    $("#freccia").attr("src","freccia_giu.jpg");
  } else {
    $("#freccia").attr("src","freccia_su.jpg");
  }
});

  2. 0

    Here is a working example of changing the image using links.

    $(document).on("click", "#Change", function() {
  $("#freccia").attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEUPo5FVBSiJTygFAL273wRmA0DGMI1NGnku9ghDnNEf6w5MRLGk03_i51lWqhnwe1SWU&usqp=CAU");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="italia">
  <img id="freccia" src="https://cdn.42matters.com/sdk/developers.google.com.png">
</div>

<button type="button" id="Change">Change image</button>

    In your case you should add / to the beggining of your path in $('#freccia').attr('src','freccia_giu.jpg');
    so it should look like this $('#freccia').attr('src','/freccia_giu.jpg');

    It depends on where the image is saved inside your project.
    If it’s inside the root folder then 'freccia_giu.jpg' should work just fine, but incase it’s inside some other directory you need to define the path to the image. For example '/images/freccia_giu.jpg'

    Edit:

    If you want to alternate between the images you can do this :

    var clickCount = 0;
$(document).on("click", "#Change", function() {
  if (clickCount % 2 == 0) {
    $("#freccia").attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEUPo5FVBSiJTygFAL273wRmA0DGMI1NGnku9ghDnNEf6w5MRLGk03_i51lWqhnwe1SWU&usqp=CAU");
  } else {
    $("#freccia").attr("src", "https://cdn.42matters.com/sdk/developers.google.com.png");
  }
  clickCount++;
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="italia">
  <img id="freccia" src="https://cdn.42matters.com/sdk/developers.google.com.png">
</div>

<button type="button" id="Change">Change image</button>
    Login or Signup to reply.
  3. 0

    It should work if you put the expression $("#freccia").attr("src",<newurl>); in the right place:

    let i=0;
$("#nazione").click(function(){
  $(".estero").slideToggle("slow", function() {  }); 
  $("#freccia").attr("src",`https://picsum.photos/id/${++i}/300/200`);
});
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<div id="italia">
CONCESSIONI NAZIONALI<img id="freccia" src="https://picsum.photos/id/0/300/200">
</div>
<button id="nazione">next image</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search