How can I select all links to images in Prototype

Question

I'm used to jquery, but need to use the Prototype framework for this project. I have a list of images (jpg, png, and gif), some of which have are links with the <a> tag. I need to add a rel attribute only to those <a> tags that are direct links to jpg, gif, and png. The href's have no similar style other than ending in .jpg, .png, or .gif. I can add the rel to a single link with specific href, but I can't figure out how to select all such links. An example of the links that need to be manipulated:

<a href="images/01.jpg"><img src="images/01.jpg" width="500" /></a>
<br>
<a href="http://www.example.com/"><img src="images/02.jpg" width="500"></a>
<br>
<a href="images/03.png"><img src="images/03.png" width="500" /></a>
<br>
<img src="images/04.jpg" width="500">
<br>

And the desired result:

<a href="images/01.jpg" rel="whatever"><img src="images/01.jpg" width="500" /></a>
<br>
<a href="http://www.example.com/"><img src="images/02.jpg" width="500"></a>
<br>
<a href="images/03.png" rel="whatever"><img src="images/03.png" width="500" /></a>
<br>
<img src="images/04.jpg" width="500">
<br>

I imagine that the final code will look something like:

<script type="text/javascript">
Event.observe(window, 'load', function() {
    $$('a[href="*.jpg","*.png"]').each(function(link){

            link.writeAttribute('rel','whatever');

    });
});
</script>

But I can't get the wildcard (*) to work properly. How do I use a wildcard in prototype?

Answer 1

Prototype doesn't support using wildcards like that, but it does allow matching the end of a value using the $= attribute selector.

$$('a[href$=.jpg], a[href$=.png], a[href$=.gif]').each(function(link){