title: Hover on text to change image with fade
body: <p>I have a series of text links, which when rolled over, would cause a specific image link to fade in; that image would not fade/change to a different image until a different text link was rolled over.</p>
  
  <p>I did find some basic script that does this, albeit without a fade affect when the image changes:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  function roll(img_name1, img_src1)
  {
  document[img_name1].src = img_src1;
  }
  &lt;/script&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="1.htm" onMouseOver="roll('poster', '1.png')"&gt;111&lt;/a&gt;
  &lt;li&gt;&lt;a href="2.htm" onMouseOver="roll('poster', '2.png')"&gt;222&lt;/a&gt;
  &lt;li&gt;&lt;a href="3.htm" onMouseOver="roll('poster', '2.png')"&gt;333&lt;/a&gt;
  &lt;/ul&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;p align="center"&gt;&lt;img src="1.png" name="poster"&gt;&lt;/p&gt; 
  </code></pre>
  
  <p>A perfect example is <a href="http://sharifabraham.com/projects/" rel="nofollow noreferrer">http://sharifabraham.com/projects/</a>, which I discovered in a similar post: <a href="https://stackoverflow.com/questions/5590878/hover-on-text-link-to-change-image">hover on text link to change image</a>. I've tried to edit and use the code in both of the aforementioned links, but to no avail. Any insight on what to do is much appreciated.</p>