I think this is a simple problem to solve, but my lack of javaScript/jQuery knowledge it a severe hinderence here!

I have a page that has 8 thumbnails on it, split over two rows (so 4 thumbs on each row) and then floated to the left etc. What I'm trying to achieve is for a larger div1 to fade in when hovering on thumb1, and then fade out once not hovering; and then the same for thumb2 (div2), thumb3 (div3), etc.

The div code is here:

2. <div id="productlogos">
3.               <ul>
4.                 <li id="logo1"><img src="images/imageplaceholder.png" title="Product 1 Text and Image"></li>
5.                 <li id="logo2"><img src="images/imageplaceholder.png" title="Product 2 Text and Image"></li>
6.                 <li id="logo3"><img src="images/imageplaceholder.png" title="Product 3 Text and Image"></li>
7.                 <li id="logo4"><img src="images/imageplaceholder.png" title="Product 4 Text and Image"></li>
8.                 <li id="logo1"><img src="images/imageplaceholder2.png" title="Product 5 Text and Image"></li>
9.                 <li id="logo2"><img src="images/imageplaceholder2.png" title="Product 6 Text and Image"></li>
10.                 <li id="logo3"><img src="images/imageplaceholder2.png" title="Product 7 Text and Image"></li>
11.                 <li id="logo4"><img src="images/imageplaceholder2.png" title="Product 8 Text and Image"></li>
12.               </ul>
13.             </div>
14.             <div id="lrgprod1">&nsub;</div>
15.             <div id="lrgprod2">&nsub;</div>
16.             <div id="lrgprod3">&nsub;</div>
17.             <div id="lrgprod4">&nsub;</div>
18.             <div id="lrgprod5">&nsub;</div>
19.             <div id="lrgprod6">&nsub;</div>
20.             <div id="lrgprod7">&nsub;</div>
21.           </div>
22.           </div>

And then the javascript I'm using to fade in/out for thumb1 is here:

3. <script type="text/javascript">
4.     $(document).ready(function() {
5.         $("#logo1").hover(function() {
6.             $("#lrgprod1").fadeIn("slow");
7.         }, function() {
8.             $("#lrgprod1").fadeOut("slow");
9.         });
10.     });
11. </script>

Now I realise I can copy the above script for each of the thumb ID's in the unordered list above, but I was wondering if there was a more elegant way of doing this?

I guess I am looking for a modification to the above script that will 'grab' each id for each li in the unordered list and then insert that value into the code above (for line 5), and then also grab a value of an href for each li (obviously I would still need to add the href into the html above) and insert that into lines 6 and 8 in the code above.

The effect I'm going for here is still that for each thumb that I hover over, the corresponding larger div would fade in and then out on leaving the hover - but in a cleaner script as opposed to using the same one 8 times with differing values for the "#xxxx"

Any pointers here would be greatly appreciated.

Thanks

David