Fade in/fade out manually in JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
    fadeIn = function(self) {
        var opacity = self.style.opacity;
        if (opacity < 1) {
            if (!opacity) opacity = 0.4;
            opacity = parseFloat(opacity)+0.05;
            self.style.opacity = opacity;
            setTimeout(function() {
              fadeIn(self);
            }, 50);
        }
    }
    fadeOut = function(self) {
        var opacity = self.style.opacity;
        if (opacity > 0.4) {
            if (!opacity) opacity = 1.0;
            opacity = parseFloat(opacity) - 0.05;
            self.style.opacity = opacity;
            setTimeout(function() {
              fadeOut(self);
            }, 100);
        }
    }
</script>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
/*img:hover
{
opacity:1.0;
filter:alpha(opacity=100); * For IE8 and earlier *
}*/
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="klematis.jpg" onmouseover="fadeIn(this)" onmouseout="fadeOut(this)" width="150" height="113" alt="klematis" />
<img src="klematis2.jpg" width="150" height="113" alt="klematis" />

<p><b>Note:</b> In IE, a <!DOCTYPE> must be added for the :hover selector to work on other elements than the <a> element.</p>
</body>
</html>