Changing the image source depending on the parent link?

Question

I've looked into Javascript for this solution but I'm afraid my knowledge for this is just too limited. I'm guessing the solution to this issue would have to be solved with "nodes" but I just can't wrap my mind around how ...

I'm looking to bypass image removal on the following website by changing the image source. Website link

<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King" class="g3 album-item-cover link-hook" itemprop="url">
   <div class="cover-image  cover-image--no-content" style="background-image: url('http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png');">
      <img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
      <div class="text-over-image ">
         <span class="text-over-image-text">In the Court of the Crimson King</span>
         <br/>
         <span class="text-over-image-text text-over-image-text--secondary">148,881 listeners</span>
      </div>
   </div>
</a>

Now I've tried very basic functions like 'replace.' but I got no results for that. Is there a way to change the following,using JavaScript, depending on the URL at the top of the code?

Example:

<a href="/music/King+Crimson/URL-A">
...
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
...
</a>

<a href="/music/King+Crimson/URL-B">
...
<img class="cover-image-image" src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="" />
...
</a>

Into:

<a href="/music/King+Crimson/URL-A">
...
<img class="cover-image-image" src="COVERFORA.JPG" alt="" />
...
</a>

<a href="/music/King+Crimson/URL-B">
...
<img class="cover-image-image" src="COVERFORB.JPG" alt="" />
...
</a>

I apologize for the little material I'm offering myself but I'm just wondering if there's actually a solution to this. Thanks for taking the time to read this post.

Cheers!

Edit:

A few examples of the source code from the following website: http://www.last.fm/music/King+Crimson/+albums

<a href="/music/King+Crimson/In+the+Court+of+the+Crimson+King"    class="g3 album-item-cover link-hook" itemprop="url">
    <img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for In the Court of the Crimson King" class="rounded" width="220" height="220" />
</a>

<a href="/music/King+Crimson/Red"    class="g3 album-item-cover link-hook" itemprop="url">
    <img src="http://cdn.last.fm/flatness/responsive/2/noimage/default_album_300_g4.png" alt="Album cover for Red" class="rounded" width="220" height="220" />
</a>

Now, the idea is to insert my own image sources into each of these but obviously it's trickier because all of the links have the same image as default.

Answer 1

$('a.album-item-cover > img.rounded'​).each(function(e) {
    var $this=$(this);
    $this.attr('src',this.parentElement.href
                          .replace(/^.*\/([^\/]+)$/,'Cover_for-$1.jpg'));
    }
    )​​​​​;

$1 here is string after last /

Answer 2

Not entirely sure what you want to do

var albumCover = document.querySelectorAll('.g3.album-item-cover.link-hook'), // get all links
    i = albumCover.length,
    a, img,
    dict = {  // link dictionary, href : src
        '/music/King+Crimson/In+the+Court+of+the+Crimson+King' : 'http://photobucket.com/InTheCourt.jpg',
        '/music/King+Crimson/Discipline' : 'http://photobucket.com/Discipline.jpg'
    };
while( --i >= 0 ) {                         // loop over each link
    a = albumCover[i];                      // that link
    img = a.getElementsByTagName('img')[0]; // that image
    img.src = dict[a.getAttribute('href')]  // replace src on that image based on that link
              || img.src;                   // else no change
}