title: How can I select all links to images in Prototype
body: <p>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 <code>&lt;a&gt;</code> tag. I need to add a rel attribute only to those <code>&lt;a&gt;</code> 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:</p>
  
  <pre><code>&lt;a href="images/01.jpg"&gt;&lt;img src="images/01.jpg" width="500" /&gt;&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="http://www.example.com/"&gt;&lt;img src="images/02.jpg" width="500"&gt;&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="images/03.png"&gt;&lt;img src="images/03.png" width="500" /&gt;&lt;/a&gt;
  &lt;br&gt;
  &lt;img src="images/04.jpg" width="500"&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>And the desired result:</p>
  
  <pre><code>&lt;a href="images/01.jpg" rel="whatever"&gt;&lt;img src="images/01.jpg" width="500" /&gt;&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="http://www.example.com/"&gt;&lt;img src="images/02.jpg" width="500"&gt;&lt;/a&gt;
  &lt;br&gt;
  &lt;a href="images/03.png" rel="whatever"&gt;&lt;img src="images/03.png" width="500" /&gt;&lt;/a&gt;
  &lt;br&gt;
  &lt;img src="images/04.jpg" width="500"&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>I imagine that the final code will look something like: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  Event.observe(window, 'load', function() {
      $$('a[href="*.jpg","*.png"]').each(function(link){
  
              link.writeAttribute('rel','whatever');
  
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But I can't get the wildcard (*) to work properly.  How do I use a wildcard in prototype?</p>