title: Change an image with onclick()
body: <p>I want to change an image to some other image when i click on the object. the code is stacked in the following order:</p>
  <pre><code>&lt;li&gt;&lt;img&gt;&lt;some text&gt;&lt;/img&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img&gt;&lt;some text&gt;&lt;/img&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img&gt;&lt;some text&gt;&lt;/img&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img&gt;&lt;some text&gt;&lt;/img&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img&gt;&lt;some text&gt;&lt;/img&gt;&lt;/li&gt;
  </code></pre>
  <p>What I wish to do is, when I click on the <code>&lt;li&gt;</code> i want to change the image to a coloured version of the image, i.e. some other image. Now, I know I can use JQuery/JS to accomplish it. But I don't want a huge amount of JS code to accomplish something so simple.</p>
  <p>Can it be done using something simpler? Like pseudo selectors? <code>.active</code> class?</p>
  <p>I cannot seem to think of it.</p>