How can I hover a different image over each text in <ul>?

here is an example of what I'm talking about: http://www.idprojections.com/portfolio.php

I've taken a look at their CSS and they assigned each link a class of "screen". Here is the CSS they used:

a.screen, a.screen:visited {
color:#ff7e00;
text-decoration: none;
position:relative;
z-index:1;
}

a.screen:visited {
color:#c00;
}
a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:200px; /* give it a width */
height:0; /* no height to solve an Opera bug that
makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:100px; /* position:the image */
top:-150px;
}
a.screen:hover {
color:#C8C22B;
text-decoration: underline overline;
border:0; /* needed for this to work in IE */
z-index:1000;
}
a.screen:hover b {
visibility:visible; /* make the image visible */
height:150px; /* now give it a height */
cursorointer; /* for IE */
z-index:500;
}
a.screen:hover b img {
border:0; /* remove the link border */
}

And the HTML:

<li><a href="http://www.3dstructural.com/" title="3D Structural Solutions" class="screen">3D Structural Solutions<b><img src="img/port/3d.jpg" alt="3D Structural Solutions Screenshot" title="3D Structural Solutions Screenshot" /></b></a></li>

Looks like the image is hidden, until they hover over it and it becomes visible. I did something similar with my drop down menu on my hosting site.

Hope this helps,
Whym

you have a smiley in the code
can you retype that part again?

Sorry that was just what came out when I copied and pasted the code.

I'll repaste the CSS:

a.screen, a.screen:visited {
color:#ff7e00;
text-decoration: none;
position:relative;
z-index:1;
}

a.screen:visited {
color:#c00;
}
a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:200px; /* give it a width */
height:0; /* no height to solve an Opera bug that
makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:100px; /* position:the image */
top:-150px;
}
a.screen:hover {
color:#C8C22B;
text-decoration: underline overline;
border:0; /* needed for this to work in IE */
z-index:1000;
}
a.screen:hover b {
visibility:visible; /* make the image visible */
height:150px; /* now give it a height */
cursor: pointer; /* for IE */
z-index:500;
}
a.screen:hover b img {
border:0; /* remove the link border */
}

thank you

all fixed now