D
Dung Ping
Some time ago someone on this forum helped me with the attached coding.
The page is in:
www.pinyinology.com/keys/keys2.html
When clicking the ok, the letters will change one by one. I like the
four letters change at same time, rather than one by one. Also, can I
add another set of symbols, such as ♣, ♦, ♥ and
♠, to the rotation? And then add more sets?
Thanks a lot. Following is the code:
------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
font-size: 100%;
background: url(http://www.grsites.com/textures/misc/misc157.jpg);
}
div#container {
position: relative;
width: 276px;
margin: 80px auto;
}
div.see {
position: absolute;
width: 52px;
height: 62px;
font: normal 120% "comic sans ms";
text-align: center;
padding: .1em;
border: 3px #fff inset;
background: #f8f8ff;
}
div.hide {
position: absolute;
width: 52px;
height: 62px;
font: bold 130% "comic sans ms";
text-align: center;
padding: .1em;
border: 3px #fff outset;
background: #f8f8ff;
filter: progid
XImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
a#trigger:link,
a#trigger:visited {
position: absolute;
left: 100px;
top: 100px;
font: normal 60% "comic sans ms";
color: #fff;
text-decoration: none;
}
a#trigger:hover {
text-transform: uppercase;
}
</style>
<!--[if IE]>
<style type="text/css">
div.hide {
padding: .18em;
}
<![endif]-->
</style>
<script type="text/javascript">
function Fader(el_id)
{
var o = this;
var el = document.getElementById(el_id);
this.s = el.style;
this.sname =
'undefined' != typeof this.s['filter'] ?
'filter' :
'undefined' != typeof this.s['opacity'] ?
'opacity' :
'undefined' != typeof this.s['MozOpacity'] ?
'MozOpacity' :
'undefined' != typeof this.s['KhtmlOpacity'] ?
'KhtmlOpacity' : '';
this.is = 0;
this.chk = (/filter/.test(this.sname));
this.end = this.chk ? 100 : .99;
this.inc = this.chk ? 1 : .01;
this.intv = null;
this.timer = null;
this.set_opac = function(v)
{
if (this.sname)
{
this.s[this.sname] = (this.chk) ?
'alpha(opacity=' + v + ')' : '' + v;
}
}
this.fade_in = function(sec)
{
window.clearInterval(this.timer);
this.is = 0;
this.intv = Math.round((sec * 1000) / 100);
this.timer = window.setInterval(
function()
{
o.set_opac(o.is += o.inc);
if (o.is >= o.end)
window.clearInterval(o.timer);
}, this.intv);
}
this.fade_out = function(sec)
{
window.clearInterval(this.timer);
this.is = this.chk ? 100 : 1;
this.intv = Math.round((sec * 1000) / 100);
this.timer = window.setInterval(
function()
{
o.set_opac(o.is -= o.inc);
if (o.is <= 0)
window.clearInterval(o.timer);
}, this.intv);
}
}
function fadeInAll()
{
glyphs[0].fade_in(3);
for (var f = 1; f < glyphs.length; ++f)
setTimeout('glyphs['+f+'].fade_in(3)', 2000 * f);
}
var glyphs = [];
window.onload = function()
{
var el, n = 1;
while (el = document.getElementById('hide' + n++))
glyphs.push(new Fader(el.id));
}
</script>
</head>
<body>
<div id="container">
<div id="see1" class="see" style="left:0;">A</div>
<div id="hide1" class="hide" style="left:0;">α</div>
<div id="see2" class="see" style="left:70px;">B</div>
<div id="hide2" class="hide" style="left:70px;">β</div>
<div id="see3" class="see" style="left:140px;">C</div>
<div id="hide3" class="hide" style="left:140px;">γ</div>
<div id="see4" class="see" style="left:210px;">D</div>
<div id="hide4" class="hide" style="left:210px;">δ</div>
</div>
<a id="trigger"
href="#null"
onclick="fadeInAll()">ok</a>
</body>
</html>
The page is in:
www.pinyinology.com/keys/keys2.html
When clicking the ok, the letters will change one by one. I like the
four letters change at same time, rather than one by one. Also, can I
add another set of symbols, such as ♣, ♦, ♥ and
♠, to the rotation? And then add more sets?
Thanks a lot. Following is the code:
------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
font-size: 100%;
background: url(http://www.grsites.com/textures/misc/misc157.jpg);
}
div#container {
position: relative;
width: 276px;
margin: 80px auto;
}
div.see {
position: absolute;
width: 52px;
height: 62px;
font: normal 120% "comic sans ms";
text-align: center;
padding: .1em;
border: 3px #fff inset;
background: #f8f8ff;
}
div.hide {
position: absolute;
width: 52px;
height: 62px;
font: bold 130% "comic sans ms";
text-align: center;
padding: .1em;
border: 3px #fff outset;
background: #f8f8ff;
filter: progid
XImageTransform.Microsoft.Alpha(opacity=0);-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
a#trigger:link,
a#trigger:visited {
position: absolute;
left: 100px;
top: 100px;
font: normal 60% "comic sans ms";
color: #fff;
text-decoration: none;
}
a#trigger:hover {
text-transform: uppercase;
}
</style>
<!--[if IE]>
<style type="text/css">
div.hide {
padding: .18em;
}
<![endif]-->
</style>
<script type="text/javascript">
function Fader(el_id)
{
var o = this;
var el = document.getElementById(el_id);
this.s = el.style;
this.sname =
'undefined' != typeof this.s['filter'] ?
'filter' :
'undefined' != typeof this.s['opacity'] ?
'opacity' :
'undefined' != typeof this.s['MozOpacity'] ?
'MozOpacity' :
'undefined' != typeof this.s['KhtmlOpacity'] ?
'KhtmlOpacity' : '';
this.is = 0;
this.chk = (/filter/.test(this.sname));
this.end = this.chk ? 100 : .99;
this.inc = this.chk ? 1 : .01;
this.intv = null;
this.timer = null;
this.set_opac = function(v)
{
if (this.sname)
{
this.s[this.sname] = (this.chk) ?
'alpha(opacity=' + v + ')' : '' + v;
}
}
this.fade_in = function(sec)
{
window.clearInterval(this.timer);
this.is = 0;
this.intv = Math.round((sec * 1000) / 100);
this.timer = window.setInterval(
function()
{
o.set_opac(o.is += o.inc);
if (o.is >= o.end)
window.clearInterval(o.timer);
}, this.intv);
}
this.fade_out = function(sec)
{
window.clearInterval(this.timer);
this.is = this.chk ? 100 : 1;
this.intv = Math.round((sec * 1000) / 100);
this.timer = window.setInterval(
function()
{
o.set_opac(o.is -= o.inc);
if (o.is <= 0)
window.clearInterval(o.timer);
}, this.intv);
}
}
function fadeInAll()
{
glyphs[0].fade_in(3);
for (var f = 1; f < glyphs.length; ++f)
setTimeout('glyphs['+f+'].fade_in(3)', 2000 * f);
}
var glyphs = [];
window.onload = function()
{
var el, n = 1;
while (el = document.getElementById('hide' + n++))
glyphs.push(new Fader(el.id));
}
</script>
</head>
<body>
<div id="container">
<div id="see1" class="see" style="left:0;">A</div>
<div id="hide1" class="hide" style="left:0;">α</div>
<div id="see2" class="see" style="left:70px;">B</div>
<div id="hide2" class="hide" style="left:70px;">β</div>
<div id="see3" class="see" style="left:140px;">C</div>
<div id="hide3" class="hide" style="left:140px;">γ</div>
<div id="see4" class="see" style="left:210px;">D</div>
<div id="hide4" class="hide" style="left:210px;">δ</div>
</div>
<a id="trigger"
href="#null"
onclick="fadeInAll()">ok</a>
</body>
</html>