title: Changing image src on hover
body: <p>I have a quick question that should be so simple. I have a table that has 4 columns and in each one I have an  Tag which in turn contains an <code>&lt;img&gt;</code>. I am looking for a way in either css or javascript that I can change the img's src when I mouseover. </p>
  
  <p>So for example, just one of the rows would look like so:</p>
  
  <pre><code>&lt;td&gt;&lt;a href="http://link1/"&gt;&lt;img alt="Link1" src="http://images/Link1.png/" /&gt;&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  
  <p>and the CSS that I have at present is:</p>
  
  <pre><code> img[alt="Link1"]:hover {
    content:url("http://Link1Pressed.png");
   }
  </code></pre>
  
  <p>Now this works beautifully as it should do in chrome but in Firefox and IE it simply does nothing on the mouseover, what could I do to rectify this? Is there a better way of doing this for the 40 buttons that I have especially as the names are all conventional. IE, the link is a lowercase version of the alt which is the same as the pre .png bit of the image src which in turn is the same as the hover over img src but for the fact that the hover over img src has Pressed too. </p>
  
  <p>Your help would be mightily appreciated. Thanks</p>