var is_ie = (document.all && document.getElementById); function dropReflection(el, height, opacity, distance) { var img = el; // create new container SPAN, and make the image we're dealing with it's child. var container = document.createElement('span'); img.parentNode.insertBefore(container, img); container.appendChild(img.parentNode.removeChild(img)); // copy the classnames and inline styles container.className = img.className; container.setAttribute("style", img.getAttribute("style")); img.setAttribute("style", ""); container.style.display = "inline"; container.style.width = img.width; // make the distance from the image to the reflection img.style.marginBottom = (distance + "px"); var msg = ""; var effectiveHeight = parseFloat(img.height)*height; // effective height, in pixels for (i = 1; i < effectiveHeight; i++) { var perc = i / effectiveHeight; var opac = (1-perc) * opacity; // skip fully transparent lines if (opac > 0) { var div = document.createElement('div'); div.style.background = "url('" + img.src + "') no-repeat scroll 0px -" + (img.height - Math.round(perc * img.height)) + "px"; div.style.height = "1px"; div.style.overflow = "hidden"; div.style.width = (img.width + "px"); if (!is_ie) div.style.opacity = opac; else div.style.filter = "filter: alpha(Opacity=" + Math.round(opac*100) + ")"; container.appendChild(div); } } }