title: onmouseover, onmouseout,onclick function Javascript
body: <p>i have a menu for my page,here is the Onmouseover, Onmouseout img</p>
  
  <pre><code>&lt;img id='wits' class="wits1" src="Images/MenuInWhite/ContactButton1.png" onmouseover="this.src='Images/mouseover/ContactButton2.png'"
          onmouseout="this.src='Images/MenuInWhite/ContactButton1.png'"  /&gt;&lt;br /&gt;
      &lt;img id='city' class="city1" src="Images/MenuInWhite/ActivitiesButton1.png" onmouseover="this.src='Images/mouseover/ActivitiesButton2.png'"
          onmouseout="this.src='Images/MenuInWhite/ActivitiesButton1.png'" /&gt;&lt;br /&gt;
      &lt;img id='organise' class="city1" onmouseout="this.src='Images/MenuInWhite/CruisesButton1.png';"
          onmouseover="this.src='Images/mouseover/CruisesButton2.png';" src="Images/MenuInWhite/CruisesButton1.png" /&gt;&lt;br /&gt;
      &lt;img id='people' class="city1" onmouseout="this.src='Images/MenuInWhite/HomeButton1.png';"
          onmouseover="this.src='Images/mouseover/HomeButton2.png';" src="Images/MenuInWhite/HomeButton1.png" /&gt;&lt;br /&gt;
  </code></pre>
  
  <p>whenever i put my mouse over images the images must change and when i take my mouse away it must be changed to the original picture, it's working fine,,</p>
  
  <p>i'd like to know how to do whenever i select any image, that image must be changed to the image which was displayed while moving the mouse across the image. and when i select any other image the same process must take place but the previous image that was changed must be changed back to the original picture.</p>
  
  <p>pls help me out for this solution,,</p>
  
  <p>thanks in advance</p>