title: this.src.replace img src for multiple images
body: <p>I want to change the source of an image when hovering over it. </p>
  
  <p>I've managed to do it for one image, by</p>
  
  <pre><code>&lt;img id="image1" src="image1-grey.png" onmouseover=colorImage(this) /&gt;"
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>function colorImage(x){
  document.getElementById("image1").src = x.src.replace("grey", "color");
  }
  </code></pre>
  
  <p>I have a dozen or so images - all in two versions, grey and color.</p>
  
  <p>Now I guess I could repeat the function above for all the images individually, but there must be a cleaner way. </p>
  
  <p>This is what I figured, but it doesn't work:</p>
  
  <pre><code>&lt;img id="image1" src="image1-grey.png" onmouseover=colorImage(image1) /&gt;"
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>function colorImage(x){
  document.getElementById(x).src = this.src.replace("grey", "color");
  }
  </code></pre>
  
  <p>This way, I thought, I'd only have one function for all the images. But no. Why not?</p>
  
  <p>Thanks a lot in advance!</p>