Image fade in/out
<p>I've looked everywhere for a solution to this and I'm close to breaking point! Please help!</p>

<p>OK so I have this:</p>

<pre><code>&lt;script type="text/javascript"&gt;
if (document.images) {
image1 = new Image;
image2 = new Image;
image3 = new Image;
image4 = new Image;

image1.src = 'images/image1.jpg';
image2.src = 'images/image2.jpg';
image3.src = 'images/image3.jpg';
image4.src = 'images/image4.jpg';

} else {
image0 = '';
image1 = '';
image2 = '';
image3 = '';
image4 = '';
document.rollimg = '';
}
&lt;/script&gt;

&lt;span onmouseover="document.rollimg.src=image4.src;"&gt;&lt;a data-description="my image" class="bullet"     tabindex="-1"&gt;&lt;div&gt;4&lt;/div&gt;&lt;/a&gt; &lt;/span&gt;
&lt;span onmouseover="document.rollimg.src=image3.src;"&gt;&lt;a data-description="my image" class="bullet" tabindex="-1"&gt;&lt;div&gt;3&lt;/div&gt;&lt;/a&gt; &lt;/span&gt;
&lt;span onmouseover="document.rollimg.src=image2.src;"&gt;&lt;a data-description="my image" class="bullet" tabindex="-1"&gt;&lt;div&gt;2&lt;/div&gt;&lt;/a&gt; &lt;/span&gt;
&lt;span onmouseover="document.rollimg.src=image1.src;"&gt;&lt;a data-description="my image" class="bullet" tabindex="-1"&gt;&lt;div&gt;1&lt;/div&gt;&lt;/a&gt; &lt;/span&gt;

&lt;div id="container"&gt;
&lt;div id="holder"&gt;
&lt;img src="images/mountain" alt=""  name="rollimg"/&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So, these images rotate as you rollover the bullets - replacing the content in the 'container' div.
What I want to be able to do now is rollover the image in the container div and for it to fade into a different image.
I need to have a rollover image for each of my images that appear in the 'container' div.</p>

<p>I hope this makes sense?
Thanks!</p>
