<!doctype html>
<html>
<head>
<title>Maintaining Table Cell Dimensions With Zoomed Content - RJM Programming - May, 2018</title>
<style>
td { display: table-cell;
background-color: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
border: 1px solid green;
width: 33%;
height: 33vh; }
</style>
<script type='text/javascript'>
var curplayer=1;
var swhatshort='no use crying over spilt milk';
var clue='No soy here?!';
var myw='px';
var myh='px';
var myt='330px';
var myl='330px';
var prefx='';
var arrids=['ltd','dhangman','rtd','t7','t8','t9'];
var wht='';
function load_zoomed_content(prefix,othis) {
prefx=prefix;
if (othis.innerHTML.indexOf('over' + 'flow') == -1) othis.innerHTML+='<div onclick="prefx=' + "'" + prefix + "';" + '" id="' + prefix + 'divhangman" style="background-color:white;overflow:scroll;-webkit-overflow-scrolling:touch;width:100%;height:100%;"></div>';
myw=eval(window.getComputedStyle(document.getElementById(prefix + 'divhangman'), null).getPropertyValue('width').replace('px','')); // + myw;
myh=eval(window.getComputedStyle(document.getElementById(prefix + 'divhangman'), null).getPropertyValue('height').replace('px','')); // + myh;
document.getElementById(prefix + 'divhangman').innerHTML='<iframe onclick="prefx=' + "'" + prefix + "';" + '" style="-webkit-overflow-scrolling: touch;border:1px solid red;transform-origin: 0% 0%;transform:scale(' + document.getElementById('scale').value + '); -o-transform: scale(' + document.getElementById('scale').value + '); -moz-transform: scale(' + document.getElementById('scale').value + '); -ms-transform: scale(' + document.getElementById('scale').value + '); -webkit-transform: scale(' + document.getElementById('scale').value + ');width:' + Math.floor(eval(eval(100.0 / document.getElementById('scale').value))) + '%;height:' + Math.floor(eval(eval(100.0 / document.getElementById('scale').value))) + '%;" id="' + prefix + 'ihangman" src="//www.rjmprogramming.com.au/HTMLCSS/hangman_bg.html?curplayer=' + curplayer + '&tosolve=' + encodeURIComponent(swhatshort) + "&clue=" + encodeURIComponent(clue) + '"></iframe>';
if (document.getElementById('ohangman').value.indexOf('?') == -1) {
prefx=prefix;
docontent('//www.rjmprogramming.com.au/HTMLCSS/hangman_bg.html?curplayer=' + curplayer + '&tosolve=' + encodeURIComponent(swhatshort) + "&clue=" + encodeURIComponent(clue));
doscale(document.getElementById('scale').value);
} else {
prefx=prefix;
docontent(document.getElementById('content').value);
doscale(document.getElementById('scale').value);
}
othis.style.width=Math.floor(eval(myw)) + 'px';
othis.style.height=Math.floor(eval(myh)) + 'px';
othis.style.maxWidth=Math.floor(eval(myw)) + 'px';
othis.style.maxHeight=Math.floor(eval(myh)) + 'px';
document.getElementById(prefix + 'divhangman').style.width=Math.floor(eval(myw)) + 'px';
document.getElementById(prefix + 'divhangman').style.height=Math.floor(eval(myh)) + 'px';
document.getElementById(prefix + 'divhangman').style.maxWidth=Math.floor(eval(myw)) + 'px';
document.getElementById(prefix + 'divhangman').style.maxHeight=Math.floor(eval(myh)) + 'px';
document.getElementById(prefix + 'ihangman').style.width=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myw)) + 'px';
document.getElementById(prefix + 'ihangman').style.height=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myh)) + 'px';
document.getElementById(prefix + 'ihangman').style.maxWidth=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myw)) + 'px';
document.getElementById(prefix + 'ihangman').style.maxHeight=Math.floor(eval(eval(1.0 / document.getElementById('scale').value) * myh)) + 'px';
}
function docontent(howurls) {
var newwo=false, sofararr=";", icouple, couple, ij, kl, wasprefx=prefx, iother, bef='', redo=false, howurl, others, other='', originother='', nonoriginother='';
if (howurls != null) {
if (howurls.trim() != '' && howurls.trim() != wht.trim()) {
if (wht != '') {
redo=true;
if (howurls.indexOf(wht) != -1 || wht.replace('% ','(').replace('px ','(').indexOf('(') == -1) redo=false;
}
var words=howurls.trim().split(' ');
//alert(words.length + ' ... ' + words[0]);
if (words.length > 1) {
if ((howurls.trim() + ' ').substring(0,2) == '++') {
if (document.URL.indexOf('?') == -1) newwo=true;
howurls=howurls.replace('++','');
words[0]=words[0].replace('++','');
if (newwo) window.open('./zoom_in_middle.htm?url=' + encodeURIComponent(howurls.trim()),'_blank');
} else if ((howurls.trim() + ' ').substring(0,1) == '+') {
if (document.URL.indexOf('?') == -1) newwo=true;
howurls=howurls.replace('+','');
words[0]=words[0].replace('+','');
if (newwo) {
window.open('./zoom_in_middle.htm?url=' + encodeURIComponent(howurls.trim()),'_blank');
return;
}
}
if (words[0].replace('%','(').replace(';','(').indexOf('(') != -1 || words[1].replace('%','(').replace(';','(').indexOf('(') != -1) {
//alert(words[0]);
howurl=words[eval(-1 + words.length)].split(',');
other=howurls.replace(' ' + words[eval(-1 + words.length)],'');
others=other.split(';');
for (iother=0; iother<others.length; iother++) {
if (others[iother].indexOf('(') != -1) {
nonoriginother=others[iother].trim() + ';';
if (others[iother].trim().indexOf('rotate(') != -1) {
document.getElementById('rotation').value=others[iother].trim().split('rotate(')[1].split(')')[0].replace('deg','');
}
if (others[iother].trim().indexOf('scale(') != -1) {
document.getElementById('scale').value=others[iother].trim().split('scale(')[1].split(')')[0];
}
if (others[iother].trim().indexOf('skew(') != -1) {
document.getElementById('skewleft').value=others[iother].trim().split('skew(')[1].split(')')[0].split(',')[0].replace('deg','');
document.getElementById('skewtop').value=others[iother].trim().split('skew(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('skew(')[1].split(')')[0].split(',').length)].replace('deg','');
}
if (others[iother].trim().indexOf('translate(') != -1) {
document.getElementById('translateleft').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px','');
document.getElementById('translateleftb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px',''),'');
document.getElementById('translatetop').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px','');
document.getElementById('translatetopb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px',''),'');
}
} else if (others[iother].trim() != '' && others[iother].substring(1).indexOf(' ') != -1) {
originother=others[iother].trim() + ';';
document.getElementById('toleft').value=others[iother].trim().split(' ')[0].replace('%','').replace('px','');
document.getElementById('toleftb').value=others[iother].trim().split(' ')[0].replace(others[iother].trim().split(' ')[0].replace('%','').replace('px',''),'');
document.getElementById('totop').value=others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px','');
document.getElementById('totopb').value=others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace(others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px',''),'');
}
}
//alert(prefx + '02:' + nonoriginother);
} else {
howurl=words[0].split(',');
other=howurls.replace(words[0] + ' ','');
others=other.split(';');
for (iother=0; iother<others.length; iother++) {
if (others[iother].indexOf('(') != -1) {
nonoriginother=others[iother].trim() + ';';
if (others[iother].trim().indexOf('rotate(') != -1) {
document.getElementById('rotation').value=others[iother].trim().split('rotate(')[1].split(')')[0].replace('deg','');
}
if (others[iother].trim().indexOf('scale(') != -1) {
document.getElementById('scale').value=others[iother].trim().split('scale(')[1].split(')')[0];
}
if (others[iother].trim().indexOf('skew(') != -1) {
document.getElementById('skewleft').value=others[iother].trim().split('skew(')[1].split(')')[0].split(',')[0].replace('deg','');
document.getElementById('skewtop').value=others[iother].trim().split('skew(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('skew(')[1].split(')')[0].split(',').length)].replace('deg','');
}
if (others[iother].trim().indexOf('translate(') != -1) {
document.getElementById('translateleft').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px','');
document.getElementById('translateleftb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[0].replace('%','').replace('px',''),'');
document.getElementById('translatetop').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px','');
document.getElementById('translatetopb').value=others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace(others[iother].trim().split('translate(')[1].split(')')[0].split(',')[eval(-1 + others[iother].trim().split('translate(')[1].split(')')[0].split(',').length)].replace('%','').replace('px',''),'');
}
} else if (others[iother].trim() != '' && others[iother].substring(1).indexOf(' ') != -1) {
originother=others[iother].trim() + ';';
document.getElementById('toleft').value=others[iother].trim().split(' ')[0].replace('%','').replace('px','');
document.getElementById('toleftb').value=others[iother].trim().split(' ')[0].replace(others[iother].trim().split(' ')[0].replace('%','').replace('px',''),'');
document.getElementById('totop').value=others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px','');
document.getElementById('totopb').value=others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace(others[iother].trim().split(' ')[eval(-1 + others[iother].trim().split(' ').length)].replace('%','').replace('px',''),'');
}
}
//alert('002:' + nonoriginother);
}
} else {
howurl=howurls.split(',');
}
for (ij=0; ij<howurl.length; ij++) {
if (ij > 0) {
prefx="";
for (kl=0; kl<arrids.length; kl++) {
if (prefx == "" && sofararr.indexOf(';' + arrids[kl] + ';') == -1) {
prefx=arrids[kl];
}
}
}
if (prefx != "") {
if (ij > 0) {
if (howurl[ij].toLowerCase().indexOf('rjmprogramming.com.au') == -1) {
bef=howurl[ij];
howurl[ij]='//www.rjmprogramming.com.au/HTMLCSS/gencont.php?url=' + encodeURIComponent(howurl[ij]);
if (document.getElementById('content').innerHTML.indexOf(howurl[ij]) == -1 && howurl[ij].indexOf('hangman_bg.html') == -1) {
document.getElementById('content').innerHTML+='<option value="' + howurl[ij] + '">' + bef + '</option>';
document.getElementById('content').value=howurl[ij];
document.getElementById('content').size='1';
}
} else {
if (document.getElementById('content').innerHTML.indexOf(howurl[ij]) == -1 && howurl[ij].indexOf('hangman_bg.html') == -1) {
document.getElementById('content').innerHTML+='<option value="' + howurl[ij] + '">..' + howurl[ij].split('www.rjmprogramming.com.au')[1] + '</option>';
document.getElementById('content').value=howurl[ij];
document.getElementById('content').size='1';
}
}
if (document.getElementById(prefx + 'ihangman')) {
document.getElementById(prefx + 'ihangman').src=howurl[ij];
if (nonoriginother != '' && originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
//alert(prefx + 'ihangman: ' + nonoriginother);
document.getElementById(prefx).click(); //load_zoomed_content(prefx + 'ihangman',document.getElementById(prefx + 'ihangman')); //tochange(document.getElementById('toleft'));
} else if (nonoriginother != '') {
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
document.getElementById(prefx).click();
} else if (originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx).click();
} else {
tochange(document.getElementById('toleft'));
}
docontent(howurl[ij]);
} else {
document.getElementById(prefx).click();
if (nonoriginother != '' && originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
//alert('2:' + nonoriginother);
document.getElementById(prefx).click(); //tochange(document.getElementById('toleft'));
} else if (nonoriginother != '') {
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
document.getElementById(prefx).click();
} else if (originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx).click();
} else {
tochange(document.getElementById('toleft'));
}
docontent(howurl[ij]);
}
} else {
if (howurl[ij].toLowerCase().indexOf('rjmprogramming.com.au') == -1) howurl[ij]='//www.rjmprogramming.com.au/HTMLCSS/gencont.php?url=' + encodeURIComponent(howurl[ij]);
if (document.getElementById('content').innerHTML.indexOf(howurl[ij]) == -1 && howurl[ij].indexOf('hangman_bg.html') == -1) {
document.getElementById('content').innerHTML+='<option value="' + howurl[ij] + '">..' + howurl[ij].split('www.rjmprogramming.com.au')[1] + '</option>';
document.getElementById('content').value=howurl[ij];
document.getElementById('content').size='1';
}
document.getElementById(prefx + 'ihangman').src=howurl[ij];
if (document.getElementById('ohangman').value.indexOf('?') == -1) {
document.getElementById('ohangman').value=howurl[ij];
}
if (nonoriginother != '' && originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
//alert(prefx + 'ihangman; ' + nonoriginother);
document.getElementById(prefx).click(); //load_zoomed_content(prefx + 'ihangman',document.getElementById(prefx + 'ihangman')); //tochange(document.getElementById('toleft'));
} else if (nonoriginother != '') {
document.getElementById(prefx + 'ihangman').style.transform=nonoriginother;
document.getElementById(prefx).click();
} else if (originother != '') {
document.getElementById(prefx + 'ihangman').style.transformOrigin=originother;
document.getElementById(prefx).click();
} else {
tochange(document.getElementById('toleft'));
}
}
sofararr+=prefx + ";";
}
}
}
}
if (prefx == "") prefx=wasprefx;
}
function doscale(howm) {
document.getElementById(prefx + 'ihangman').style.transform="scale(" + howm + ")" + tochange(document.getElementById('rotation'));
tochange(document.getElementById('toleft'));
}
function wholething() {
var oprefix=" " + document.getElementById('toleft').value + document.getElementById('toleftb').value + " " + document.getElementById('totop').value + document.getElementById('totopb').value + ';';
var ssuffix=" scale(" + document.getElementById('scale').value + ")";
var rotsuffix=" rotate(" + document.getElementById('rotation').value + "deg)";
var tlsuffix=" translate(" + document.getElementById('translateleft').value + document.getElementById('translateleftb').value + "," + document.getElementById('translatetop').value + document.getElementById('translatetopb').value + ")";
var skewsuffix=" skew(" + document.getElementById('skewleft').value + "deg," + document.getElementById('skewtop').value + "deg)";
return oprefix + ssuffix + rotsuffix + tlsuffix + skewsuffix + "; ";
}
function tochange(cthis) {
var skewsuffix=" skew(" + document.getElementById('skewleft').value + "deg," + document.getElementById('skewtop').value + "deg)";
var tlsuffix=" translate(" + document.getElementById('translateleft').value + document.getElementById('translateleftb').value + "," + document.getElementById('translatetop').value + document.getElementById('translatetopb').value + ")";
if (cthis.id.indexOf('rotation') != -1) { // rotation change
var retval=" rotate(" + cthis.value + "deg)" + skewsuffix + tlsuffix;
//if (prefx != 'dhangman') alert(prefx);
//document.title="scale(" + document.getElementById('scale').value + ")" + retval;
document.getElementById(prefx + 'ihangman').style.transform="scale(" + document.getElementById('scale').value + ")" + retval;
return retval;
} else if (cthis.id.indexOf('translate') != -1) { // translation change
document.getElementById(prefx + 'ihangman').style.transform="scale(" + document.getElementById('scale').value + ")" + " rotate(" + document.getElementById('rotation').value + "deg)" + skewsuffix + tlsuffix;
return tlsuffix;
} else if (cthis.id.indexOf('skew') != -1) { // translation change
document.getElementById(prefx + 'ihangman').style.transform="scale(" + document.getElementById('scale').value + ")" + " rotate(" + document.getElementById('rotation').value + "deg)" + skewsuffix + tlsuffix;
return skewsuffix;
} else if (cthis.id.indexOf('b') != -1) { // unit change
if (cthis.id.indexOf('left') != -1) { // x (left) change
document.getElementById(prefx + 'ihangman').style.transformOrigin="" + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value + " " + document.getElementById('totop').value + document.getElementById('totopb').value;
} else { // y (top) change
document.getElementById(prefx + 'ihangman').style.transformOrigin="" + document.getElementById('toleft').value + document.getElementById('toleftb').value + " " + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value;
}
} else { // value change
if (cthis.id.indexOf('left') != -1) { // x (left) change
document.getElementById(prefx + 'ihangman').style.transformOrigin="" + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value + " " + document.getElementById('totop').value + document.getElementById('totopb').value;
} else { // y (top) change
document.getElementById(prefx + 'ihangman').style.transformOrigin="" + document.getElementById('toleft').value + document.getElementById('toleftb').value + " " + document.getElementById(cthis.id.replace('b','')).value + document.getElementById(cthis.id.replace('b','') + 'b').value;
}
}
return "";
}
function cload() {
var uprefix='';
var oot=location.search.split('originother=')[1] ? decodeURIComponent(location.search.split('originother=')[1].split('&')[0]) : '';
if (oot != '') uprefix=oot + ' ';
var noot=location.search.split('nonoriginother=')[1] ? decodeURIComponent(location.search.split('nonoriginother=')[1].split('&')[0]) : '';
if (noot != '') uprefix+=noot + ' ';
var turl=location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1].split('&')[0]) : '';
if (turl != '') docontent(uprefix + turl);
}
</script>
</head>
<body onload="load_zoomed_content('dhangman',document.getElementById('dhangman')); cload();">
<table style='width:100%;height:100vh;' border=1>
<tbody style='width:100%;height:100vh;'>
<tr style='width:100%;height:33vh;'><td style='border:1px solid green;width:33%;height:33vh;'>
Zoom (or scale): <select size=10 id='scale' onchange='doscale(this.value);'>
<option value='0.1'>10% = 0.1</option>
<option value='0.2'>20% = 0.2</option>
<option value='0.25'>25% = 0.25</option>
<option value='0.3'>30% = 0.3</option>
<option value='0.4'>40% = 0.4</option>
<option value='0.5' selected>Default Zoom 50% = Scale 0.5</option>
<option value='0.75'>75% = 0.75</option>
<option value='1.0'>100% = 1.0</option>
<option value='2.0'>200% = 2.0</option>
<option value='3.0'>300% = 3.0</option>
</select>
</td><td style='border:1px solid green;width:33%;height:33vh;'>
<h3 style="width:100%;text-align:center;">Maintaining Table Cell Dimensions With Zoomed Content<br>
RJM Programming<br>
May, 2018</h3></td><td style='border:1px solid green;width:33%;height:33vh;'>
<input onclick=" wht=wholething(); docontent(prompt('What is/are the URL(s) (comma delimited) you want to show? (rjmprogramming.com.au ones most likely to succeed) ... prefix or append the default transformation parameters supplied, that will be heeded if retained ... prefix by ++ to do both here and in new window or prefix by + to just do in that new window',wht));" type="button" title="Your own URL(s) (comma separated) (rjmprogramming.com.au ones most likely to succeed)" value="Content"></input>: <select size=2 id='content' onchange='docontent(this.value);'>
<option id='ohangman' value='//www.rjmprogramming.com.au/HTMLCSS/hangman_bg.html' selected>Hangman Game</option>
<option value='//www.rjmprogramming.com.au/PHP/lo_one_new.html'>LibreOffice Business Letter Template</option>
</select><br><br>
Transform Origin: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=toleft type=number value='0'></input><input id=toleftb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input> <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=totop type=number value='0'></input><input id=totopb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input><br><br>
Translation: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=translateleft type=number value='0'></input><input id=translateleftb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input>,<input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=translatetop type=number value='0'></input><input id=translatetopb type='button' value='%' onclick="this.value=this.value.replace('%','^').replace('px','%').replace('^','px'); tochange(this);" title="Toggle between % and px"></input><br><br>
Skew: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=skewleft type=number min='-359' max='359' value='0'></input> deg, <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=skewtop type=number min='-359' max='359' value='0'></input> deg<br><br>
Rotation: <input style='width:20%;' step=1 onblur='tochange(this);' onchange='tochange(this);' id=rotation type=number min='-359' max='359' value='0'></input> deg<br><br>
</td></tr>
<tr id='trhangman' style='width:100%;height:33vh;'>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='ltd'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='dhangman'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='rtd'></td></tr>
<tr style='width:100%;height:33vh;'>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='t7' style='background-color:red;'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='t8' style='background-color:yellow;'></td>
<td title="Click me for content" onclick="load_zoomed_content('' + this.id,this);" id='t9' style='background-color:green;'><div id=shangman style="display:none;">Score: 0/0</div><div id=score style="display:none;">Score: 0/0</div></td></tr>
</tbody>
</table>
</body>
</html>