Add a cross fade effect on an image gallery
<p>I have a smaller image which is of a control with 8 buttons, I have set up 8 area shapes so when what looks like a button is clicked the larger main image is updated.</p>

<p>When an area shape is clicked the relevant image loads, but I want the image to fade in and the old image to fade out.</p>

<p>Is this possible? Happy to explore Javascript and Jquery solutions. Thanks.</p>

<pre><code>&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;TEST&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function showImage(image){
  var mainImage = document.getElementById('mainImage');
  mainImage.src = image; 
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div&gt;&lt;img src="button.jpg" width="260" height="193" border="0" usemap="#Map" /&gt;
&lt;map name="Map" id="Map"&gt;
&lt;area shape="rect" coords="61,21,120,55" href="#" onclick="showImage('A.jpg')"  /&gt;
&lt;area shape="rect" coords="147,21,205,54" href="#" onclick="showImage('B.jpg')"  /&gt;
&lt;area shape="rect" coords="60,58,121,90" href="#" onclick="showImage('C.jpg')"  /&gt;
&lt;area shape="rect" coords="147,59,205,92" href="#" onclick="showImage('D.jpg')"  /&gt;
&lt;area shape="rect" coords="61,92,121,125" href="#" onclick="showImage('E.jpg')"  /&gt;
&lt;area shape="rect" coords="146,96,205,128" href="#" onclick="showImage('F.jpg')"  /&gt;
&lt;area shape="rect" coords="60,128,122,163" href="#" onclick="showImage('G.jpg')"  /&gt;
&lt;area shape="rect" coords="146,131,204,164" href="#" onclick="showImage('I.jpg')"  /&gt;
&lt;/map&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;img id="mainImage" src="A.jpg" /&gt; 
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
