|
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setColor(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""
if (evt) {
var elem = (evt.target) ? evt.target : evt.srcElement
if (elem.className == "palette") {
document.getElementById("display").style.backgroundColor = elem.style.backgroundColor
}
}
}
document.onmouseover = setColor
</SCRIPT>
</HEAD>
<BODY>
<H1>Layer Background Colors (W3C)</H1>
<HR>
<SCRIPT LANGUAGE="JavaScript">
var oneLayer
var colorTop = 100
var colorLeft = 20
var colorWidth = 40
var colorHeight = 40
var colorPalette = new Array("aquamarine","coral","forestgreen",
"goldenrod","red","magenta","navy","teal")
for (var i = 0; i < colorPalette.length; i++) {
oneLayer = "<DIV ID='swatch" + i + "' CLASS='palette'"
oneLayer += "STYLE='position:absolute; top:" + colorTop + ";"
oneLayer += "left:" + ((colorWidth * i) + colorLeft) + ";"
oneLayer += "width:" + colorWidth + "; height:" + colorHeight + ";"
oneLayer += "background-color:" + colorPalette[i] + "'></DIV>\n"
document.write(oneLayer)
}
</SCRIPT>
<DIV ID="display" STYLE="position:absolute; top:150; left:80; width:200; height:200; background-color:gray">
<SPAN STYLE="font-weight:bold; color:white; text-align:center">
Some reversed text to test against background colors.</SPAN>
</DIV>
</BODY>
</HTML>
|