[HTML][Javascript][IE] Make Glow Text
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link type="text/css" href="css/GlobleStyle.css" rel="stylesheet">
<title>UPC Cable Gateway</title>
<style type="text/css">
<!--
.stylefirst
{
font-size: 18px;
padding:14px 10px 14px 15px;
text-decoration: none;
color:#ffffff;
}
.styleOther
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
}
.Status_styleOtherchange
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
text-shadow: 3px 3px 10px #ffffff;
border-bottom: 0px #000 solid;
-ms-filter: "glow(color=#81BEF7,strength=5)";
background-image:url('./image/Status.png');
background-repeat:no-repeat;
background-position:left bottom;
}
.Basic_styleOtherchange
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
text-shadow: 3px 3px 10px #ffffff;
border-bottom: 0px #000 solid;
-ms-filter: "glow(color=#81BEF7,strength=5)";
background-image:url('./image/Basic.png');
background-repeat:no-repeat;
background-position:left bottom;
}
.Advanced_styleOtherchange
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
text-shadow: 3px 3px 10px #ffffff;
border-bottom: 0px #000 solid;
-ms-filter: "glow(color=#81BEF7,strength=5)";
background-image:url('./image/Advanced.png');
background-repeat:no-repeat;
background-position:left bottom;
}
.ParentalControl_styleOtherchange
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
text-shadow: 3px 3px 10px #ffffff;
border-bottom: 0px #000 solid;
-ms-filter: "glow(color=#81BEF7,strength=5)";
background-image:url('./image/ParentalControl.png');
background-repeat:no-repeat;
background-position:left bottom;
}
.Wireless_styleOtherchange
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
text-shadow: 3px 3px 10px #ffffff;
border-bottom: 0px #000 solid;
-ms-filter: "glow(color=#81BEF7,strength=5)";
background-image:url('./image/Wireless.png');
background-repeat:no-repeat;
background-position:left bottom;
}
.System_styleOtherchange
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
text-shadow: 3px 3px 10px #ffffff;
border-bottom: 0px #000 solid;
-ms-filter: "glow(color=#81BEF7,strength=5)";
background-image:url('./image/System.png');
background-repeat:no-repeat;
background-position:left bottom;
}
.status_styleOther
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
}
.basic_styleOther
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
}
.advanced_styleOther
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
}
.parentalControl_styleOther
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
}
.wireless_styleOther
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
}
.system_styleOther
{
font-size: 18px;
padding:14px 15px 14px 15px;
text-decoration: none;
color:#ffffff;
}
#Status
{
position: absolute;
top: 20%;
left: 12%
}
#Basic
{
position: absolute;
top: 20%;
left: 20%
}
#Advanced
{
position: absolute;
top: 20%;
left: 26%
}
#ParentalControl
{
position: absolute;
top: 20%;
left: 36%
}
#Wireless
{
position: absolute;
top: 20%;
left: 52%
}
#System
{
position: absolute;
top: 20%;
left: 62%
}
-->
</style>
<script language="javascript">
<!--
function ChangeMenuByMouseClick(id)
{
if (id=="status")
{
document.getElementById("Status").setAttribute('class', 'Status_styleOtherchange');
document.getElementById("Basic").setAttribute('class', 'styleOther');
document.getElementById("Advanced").setAttribute('class', 'styleOther');
document.getElementById("ParentalControl").setAttribute('class', 'styleOther');
document.getElementById("Wireless").setAttribute('class', 'styleOther');
document.getElementById("System").setAttribute('class', 'styleOther');
}
else if (id=="basic")
{
document.getElementById("Status").setAttribute('class', 'styleOther');
document.getElementById("Basic").setAttribute('class', 'Basic_styleOtherchange');
document.getElementById("Advanced").setAttribute('class', 'styleOther');
document.getElementById("ParentalControl").setAttribute('class', 'styleOther');
document.getElementById("Wireless").setAttribute('class', 'styleOther');
document.getElementById("System").setAttribute('class', 'styleOther');
}
else if (id=="advanced")
{
document.getElementById("Status").setAttribute('class', 'styleOther');
document.getElementById("Basic").setAttribute('class', 'styleOther');
document.getElementById("Advanced").setAttribute('class', 'Advanced_styleOtherchange');
document.getElementById("ParentalControl").setAttribute('class', 'styleOther');
document.getElementById("Wireless").setAttribute('class', 'styleOther');
document.getElementById("System").setAttribute('class', 'styleOther');
}
else if (id=="parentalControl")
{
document.getElementById("Status").setAttribute('class', 'styleOther');
document.getElementById("Basic").setAttribute('class', 'styleOther');
document.getElementById("Advanced").setAttribute('class', 'styleOther');
document.getElementById("ParentalControl").setAttribute('class', 'ParentalControl_styleOtherchange');
document.getElementById("Wireless").setAttribute('class', 'styleOther');
document.getElementById("System").setAttribute('class', 'styleOther');
}
else if (id=="wireless")
{
document.getElementById("Status").setAttribute('class', 'styleOther');
document.getElementById("Basic").setAttribute('class', 'styleOther');
document.getElementById("Advanced").setAttribute('class', 'styleOther');
document.getElementById("ParentalControl").setAttribute('class', 'styleOther');
document.getElementById("Wireless").setAttribute('class', 'Wireless_styleOtherchange');
document.getElementById("System").setAttribute('class', 'styleOther');
document.body.setAttribute('onload', 'SomeFunction()');
}
else if (id=="system")
{
document.getElementById("Status").setAttribute('class', 'styleOther');
document.getElementById("Basic").setAttribute('class', 'styleOther');
document.getElementById("Advanced").setAttribute('class', 'styleOther');
document.getElementById("ParentalControl").setAttribute('class', 'styleOther');
document.getElementById("Wireless").setAttribute('class', 'styleOther');
document.getElementById("System").setAttribute('class', 'System_styleOtherchange');
}
else if (id=="other")
{
document.getElementById("Status").setAttribute('class', 'styleOther');
document.getElementById("Basic").setAttribute('class', 'styleOther');
document.getElementById("Advanced").setAttribute('class', 'styleOther');
document.getElementById("ParentalControl").setAttribute('class', 'styleOther');
document.getElementById("Wireless").setAttribute('class', 'styleOther');
document.getElementById("System").setAttribute('class', 'styleOther');
}
}
function init()
{
ChangeMenuByMouseClick('other');
}
-->
</script>
</head>
<body lang="en" onload="init();">
<table style="padding: 24px 0px 11px 10px;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr valign="top">
<td><table style="height: 94px; margin-left: 0px; width: 960px;" border="0" cellpadding="0" cellspacing="0" height="21" width="100%"><tbody>
<tr>
<td style="height: 94px; width: 756px;" align="left"><img src="./image/logo_UPC.png"></td>
<td style="width: 114px;">AdminLanguage:</td>
<td style="width: 82px;" height="21">
<select name="Language_country" id="country">
<option value="US" selected="selected">English</option>
<option value="TW">Taiwan</option>
</select></td>
</tr>
</tbody></table>
<table style="width: 1100px; height: 43px;" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="menubar">
<a id="status" class="status_styleOther" target="myframe" onclick="ChangeMenuByMouseClick('status')" href="RgStatusSystem.htm"><font face="Arial"><div id="Status">STATUS</div></font></a>
<a id="basic" class="basic_styleOther" target="myframe" onclick="ChangeMenuByMouseClick('basic')" href="RgBasicInternet.htm"><font face="Arial"><div id="Basic">BASIC</div></font></a>
<a id="advanced" class="advanced_styleOther" target="myframe" onclick="ChangeMenuByMouseClick('advanced')" href="RgAdvancedOptions.htm" ><font face="Arial"><div id="Advanced">ADVANCED</div></font></a>
<a id="parentalControl" class="parentalControl_styleOther" target="myframe" onclick="ChangeMenuByMouseClick('parentalControl')" href="RgAdvancedOptions.htm"><font face="Arial"><div id="ParentalControl">PARENTAL CONTROL</div></font></a>
<a id="wireless" class="wireless_styleOther" target="myframe" onclick="ChangeMenuByMouseClick('wireless')" href="RgWirelessRadio.htm"><font face="Arial"><div id="Wireless">WIRELESS</div></font></a>
<a id="system" class="system_styleOther" target="myframe" onclick="ChangeMenuByMouseClick('system')" href="RgSystemPassword.htm"><font face="Arial"><div id="System">SYSTEM</div></font></a>
</td>
</tr>
</tbody></table>
<iframe id="myframe" name="myframe" src="login.htm" frameborder="0" height="1200" scrolling="no" width="1100"></iframe>
</td>
</tr>
</tbody>
</table>
</body>
</html>
***************************************************************************************
Two key point:
<div id="Status">STATUS</div>
Text must inside <div> , if not inside the <div> wont have effect on it.
-ms-filter: "glow(color=#81BEF7,strength=5)";
Must have " " , if not wont have effect on it.
