Show Javascript Image fade in effect from text link
<p>I have a simple menu which shows a different image depending on which link you hover the mouse cursor over.
Now I wanted that the images that appear would fade in so that it would look better, but I am not yet that much familiar with Javascript so I wonder if someone can help me.</p>

<p>Here's my code so far:</p>

<p>Javascript:</p>

<pre><code>if (document.images) {


image2 = new Image
image3 = new Image
image4 = new Image
image5 = new Image
image6 = new Image
image7 = new Image
image8 = new Image
image9 = new Image
image10 = new Image


image1.src = "imgs/Categories/1.jpg" 
image2.src = "imgs/Categories/2.jpg"
image3.src = "imgs/Categories/3.jpg"
image4.src = "imgs/Categories/4.jpg"
image5.src = "imgs/Categories/5.jpg"
image6.src = "imgs/Categories/6.jpg"
image7.src = "imgs/Categories/7.jpg"
image8.src = "imgs/Categories/8.jpg"
image9.src = "imgs/Categories/9.jpg"
image10.src = "imgs/Categories/10.jpg"

}
</code></pre>

<p>Here is the HTML:</p>

<pre><code>&lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image1.src",  onMouseout="document.imagename.src=image10.src"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li &gt;&lt;a href="#" onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image10.src"&gt;Link 2 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image12.src"&gt;Link 3 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image10.src": Link 4 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image10.src"&gt;Link 5 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image6.src" onMouseout="document.imagename.src=image10.src"&gt;Link 6 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image7.src" onMouseout="document.imagename.src=image12.src"&gt;Link 7 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image8.src" onMouseout="document.imagename.src=image10.src"&gt;Link 8 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" onMouseover="document.imagename.src=image9.src" onMouseout="document.imagename.src=image10.src"&gt;Link 9&lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
</code></pre>

<p>Thanks!
Nuno</p>
