I'd like to tweak it a bit so that my thumbnails have a transparency until a person mouses-over them.

I'd like my thumbnails in the script: http://chadhammer.com/CH_art.htm(towards the bottom) to be semi-transparent until moused-over.


I was looking at the following code, but it only seems to work on the first thumbnail and none of the rest in a separate test on thumbnails only:
Code:
<html>
<head>
<style>
img
{
filter:alpha(opacity=10)
}
</style>
<script type="text/javascript">
function clean()
{
interval=setInterval("makeclean(myImage)",10)
}
function foggy()
{
clearInterval(interval)
document.getElementById('myImage').filters.alpha.opacity=10
}
function makeclean()
{
if (document.getElementById('myImage').filters.alpha.opacity<100)
 {
 document.getElementById('myImage').filters.alpha.opacity+=5
 }
else if (window.interval)
 {
 clearInterval(interval)
 }
}
</script>
</head>
 
<body>
<b>Mouse over the image-link:</b><br />
<a href="default.asp">
<img border="0" id="myImage" src="smiley.gif" onmouseover="clean()" onmouseout="foggy()" width="32" height="32" />
</a>
</body>
 
</html>

I'd also like to try and overlap the thumbnails a bit. Layering maybe?

I'd be greatful for any help, pointers or examples.
TIA
http://chadhammer.com
PS: Thx for DynamicDrive! Excellent resource!