F
fulio pen
Hello,
I like to make some changes in following page:
www.pinyinology.com/keys/keys.html
1. When clicking the OK in the page, the letters on the squares would
change one after another. I would like to have letters in all the
squares to change at same time.
2. Is it possible to add another set of letters, Such as the Greek
letters Α, Β, Χ, and Δ? When clicking the OK, the
Roman letters will be replaced by the Chinese phonetic letters, and
clicking OK again, the Chinese will be replaced by the Greek.
Please note that the code is not mine, but from somebody at this forum.
The credit goes to that programer.
Thanks again for help.
<!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>
I like to make some changes in following page:
www.pinyinology.com/keys/keys.html
1. When clicking the OK in the page, the letters on the squares would
change one after another. I would like to have letters in all the
squares to change at same time.
2. Is it possible to add another set of letters, Such as the Greek
letters Α, Β, Χ, and Δ? When clicking the OK, the
Roman letters will be replaced by the Chinese phonetic letters, and
clicking OK again, the Chinese will be replaced by the Greek.
Please note that the code is not mine, but from somebody at this forum.
The credit goes to that programer.
Thanks again for help.
<!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>