> 
Zoom
Text with a beautiful zoomed effect.
<HTML>
<HEAD>
<TITLE073</TITLE>
<STYLE TYPE="text/css">
<!--
#parentDiv {
position: absolute;
left: 100px;
top: 175px;
width: 400px;
height: 100px;
clip: rect(0,400,100,0);
}
#childDiv {
position: absolute;
}
// -->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// declare global variables
var NS4 = document.layers;
var IE4 = document.all;
var beg = 10;
var max = 20;
var font_size = beg;
var style_strng = "<STYLE TYPE='text/css'>\n";
var msg = new Array("MorpheusWeb.it", "Risorse per webmaster", "script, manuali, links", "www.morpheusweb.it");
var the_color = new Array("color: red;", "color: green;", "color: blue;", "color: lightseagreen;");
for (var m=0; m<msg.length; m++) // function to build font sizes and color
{ for (var i=beg; i<=max; i++)
{ style_strng += ".f" + i + m + " { font-size:" + i + "pt; " + the_color[m] + " }\n";
}
style_strng += "</STYLE>";
document.write(style_strng);
style_strng = "<STYLE TYPE='text/css'>\n"; // reset for next color
}
function writeIt(id, text) // this function writes the text
{ if (NS4)
{ var the_layer = eval("document.parentDiv.document." + id + ".document"); // Netscape must reference parent layer
the_layer.open(); // looks ridiculous doesn't it
the_layer.write(text);
the_layer.close();
}
else
if (IE4)
{ document.all[id].innerHTML = text; // IE can reference it directly
}
}
function scaleMsg(x) // calls function to write text specifying size and color
{ if (font_size <= max) // stop at max size
{ writeIt("childDiv", "<DIV ALIGN='CENTER'><SPAN CLASS='f" + font_size + x + "'>" + msg[x] + "</SPAN></DIV>");
font_size++;
setTimeout("scaleMsg(" + x + ")", 40);
}
else
{ font_size=beg; // reset for next msg
}
}
function startShow()
{ m=0;
scaleMsg(m); // show first msg
m=1;
setTimeout("scaleMsg(" + m + ")", 3000); // show second msg
m=2;
setTimeout("scaleMsg(" + m + ")", 6500); // show third msg
m=3;
setTimeout("scaleMsg(" + m + ")", 10000); // show last msg
}
// -->
</SCRIPT>
<TITLE>HTML.it - Dynamic HTML</TITLE>
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
</HEAD>
<BODY bgcolor="white" ONLOAD="self.focus(); startShow()">
<DIV ID="parentDiv">
<DIV ID="childDiv">
<DIV ALIGN="CENTER"><SPAN CLASS="s10">Welcome</SPAN></DIV></DIV> </DIV>
<DIV ID="theHint"></DIV>
</body>
</html>
