HTML images mouse over code

I am looking for the code to make this image http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg hover over this one http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20r开发者_如何学编程eview%202010.jpg on a mouse over.

I am trying to link these to http://www.ciob-online-documents.co.uk/AnnualReview2010

Thanks for your help

P.S I have looked everywhere and tried all sorts of examples.

I am using a Drupal WYSIWYG editor in rich text.

---

Try to open HTML mode in your Drupal WYSIWYG editor. The code for changing an image on hover could be the following:

<a href="http://www.ciob-online-documents.co.uk/AnnualReview2010" title="">
  <img src="http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg" alt="" onmouseover="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg';" onmouseout="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg'" />
</a>

So, when a user is going mouseover image element, it's src attribute will be changed to your second image. As soon as user mouseout src of the image will change again. A link on the top of the image, is going to turn user to a page you mentioned onclick.