CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sigma R3boot
Sigma R3boot

Reputation: 23

Change image if source contains

I have a list that looks like, 

<li class="">
  <ul class="item  highlightShoplift">
    <li class="title left">
      <img width="30" height="30" src="/images/crimes/c.png?v=1486475443550">
    </li>
    <li class="radio right has-pretty-child">
      <div class="clearfix prettyradio labelright  blue" role="radio" aria-checked="false" aria-disabled="false" "=" ">
        <input type="radio" value="shoplift " name="crime " style="display: none; ">
        <a href="# " role="presentation " tabindex="0 " class=" "></a>
        <label for="undefined " class=" "></label>
      </div>
    </li>
    <li class="bonus left ">
      Shoplift
    </li>
    <li class="points left ">
      <span class="desc ">-4 Nerve</span>
    </li>
    <li class="clear "></li>
  </ul>
</li>

and I need to change the image. I need to change it from /images/crimes/c.png to http://medictests.com/wp-content/uploads/2011/05/checkmark.png

however I'm not sure how. Using jquery/javascript.

Upvotes: 0

Views: 1007

Answers (4)

jl_
jl_

Reputation: 5539

It depends on many things, for example, what triggers the change, what is the requirement at hand, etc.

Here is a sample snippet to change the image for a sample requirement, say, Change the image after a predefined time using JavaScript.

Now that we can accomplish it using plain Vanilla JavaScript, here could be the steps:

  • Find the Image element that we are aiming at (think about using specific selectors and combinators)
  • Understand the timeout period
  • Change the src attribute of the image to point to the new image

window.onload = function() {
  // Get the Image element
  var img = document.querySelector("ul.item img");

  // New image
  var imageUrl = 'http://medictests.com/wp-content/uploads/2011/05/checkmark.png';

  // Change the image after a set time, for example
  setTimeout(function() {
    img.setAttribute("src", imageUrl);
  }, 1000);

}
<ul class="item  highlightShoplift">
  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg">
  </li>
</ul>

Let's go a step further and say - we should replace the image only if the src attribute contains a specific term, say, flower. 

window.onload = function() {
  // Get the Image element
  var imgElements = document.querySelectorAll("ul.item img");

  // New image
  var imageUrl = 'http://medictests.com/wp-content/uploads/2011/05/checkmark.png';

  imgElements.forEach(function(element, index, array) {

    if (element.src.toLowerCase().includes("flower")) {
      setTimeout(function() {
        element.setAttribute("src", imageUrl);
      }, 1000);
    }
  });

}
<ul class="item  highlightShoplift">
  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg">
  </li>

  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/0/0c/White_and_yellow_flower.JPG">
  </li>

  <li class="title left">
    <img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Flower_poster_2.jpg">
  </li>


</ul>

Upvotes: 1

DamiToma
DamiToma

Reputation: 1106

This is really a bad question, however I think that you need to change an image if its SRC contains a certain word.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
    var src = ''; //YOUR SRC IF STRING CONTAINS
    var other_src = ''; //YOUR SRC IF STRING DOESN'T CONTAIN
    if(src.indexOf('YOUR WORD') > 0) {
        document.getElementById("image").src = src; 
    } else {
        document.getElementById("image").src = other_src; 
    }
}
</script>
</head>
<body>
<li class="">
  <ul class="item  highlightShoplift">
    <li class="title left">
      <img width="30" height="30" src="" id="image">
    </li>
    <li class="radio right has-pretty-child">
      <div class="clearfix prettyradio labelright  blue" role="radio" aria-checked="false" aria-disabled="false" "=" ">
        <input type="radio" value="shoplift " name="crime " style="display: none; ">
        <a href="# " role="presentation " tabindex="0 " class=" "></a>
        <label for="undefined " class=" "></label>
      </div>
    </li>
    <li class="bonus left ">
      Shoplift
    </li>
    <li class="points left ">
      <span class="desc ">-4 Nerve</span>
    </li>
    <li class="clear "></li>
  </ul>
</li>
</body>
</html>

Anyway I don't know if this is what you're looking for.

Upvotes: 0

Nir Ben-Yair
Nir Ben-Yair

Reputation: 1606

Using jQuery : 

$("img").attr('src' ,'http://medictests.com/wp-content/uploads/2011/05/checkmark.png');

Note that is better to give the img a class and target only that particular image.

Upvotes: 0

Abhinav Galodha
Abhinav Galodha

Reputation: 9888

If you add an id attribute to the image tag like

<img id="imgToChange" width="30" height="30" src="/images/crimes/c.png?v=1486475443550">

Then, you can directly change the image src attribute like

document.getElementById("imgToChange").src= "http://medictests.com/wp-content/uploads/2011/05/checkmark.png";

and Using jquery

$("#imgToChange").attr('src', 'http://medictests.com/wp-content/uploads/2011/05/checkmark.png');

Upvotes: 0

Related Questions