<html>
<head>
<title>Reveal Image in Front of Image Primer Tutorial - RJM Programming - September, 2014</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
var timer=null;
var atag=null;
var startWidth = 100;
var endWidth = eval(1280 - startWidth);
var startHeight = 100;
var endHeight = eval(800 - startHeight);
var hgad = 10;
var ok = true;
var method = 1;
var twinkleidea = ["Background Image Refreshed Method", "Background Image Constant Method"];
var huh = ["block", "none"];
var twinkledata = [
"onestar.jpg", "onenostar.jpg", "0", "0", "0", "0",
"twostar.jpg", "twonostar.jpg", "0", "0", "0", "0",
"threestar.jpg", "threenostar.jpg", "0", "0", "0", "0",
"fourstar.jpg", "fournostar.jpg", "0", "0", "0", "0",
"fivestar.jpg", "fivenostar.jpg", "0", "0", "0", "0",
"sixstar.jpg", "sixnostar.jpg", "0", "0", "0", "0",
"sevenstar.jpg", "sevennostar.jpg", "0", "0", "0", "0"
];
function startSurprise(ais) {
atag = ais;
//alert(atag.innerHTML);
if (atag.innerHTML.indexOf("Reveal ") != -1) {
document.getElementById('xbod').style.backgroundImage = "url('night.jpg')";
document.getElementById('hgad').style.display = 'block';
document.getElementById('mycard1').innerHTML = '';
document.getElementById('mycard2').innerHTML = '';
if (endHeight == 0) endHeight = document.getElementById('iis').style.height.replace('px', '');
if (document.getElementById('link').innerHTML != "") ok = false;
atag.innerHTML = atag.innerHTML.replace("Reveal ", "Stop revealing ");
timer = setInterval(continueSurprise, 1000);
} else if (ok == true) {
atag.innerHTML = atag.innerHTML.replace("Stop revealing ", "Reveal ");
clearInterval(timer);
timer = null;
}
if (document.getElementById('link').innerHTML == '') ok = true;
document.getElementById('link').innerHTML = '';
}
function continueSurprise() {
newdivs();
}
function newdivs() {
var i, j, iok=0, prevx, prevy, newx, newy, arrx={}, arry={};
var anew = Math.floor(Math.random() * endWidth) + startWidth;
if (method == 1) document.getElementById('xbod').style.backgroundImage = "url('night.jpg?anew" + anew + "')";
for (i=0; i<eval(twinkledata.length / 1); i+=6) {
prevx = twinkledata[eval(i + 2)];
prevy = twinkledata[eval(i + 3)];
iok = 0;
while (iok == 0) {
if (i == 0) {
newx = Math.floor(Math.random() * endWidth) + startWidth;
newy = Math.floor(Math.random() * endHeight) + startHeight;
arrx[arrx.length] = newx;
arry[arry.length] = newy;
iok = 1;
} else {
newx = Math.floor(Math.random() * endWidth) + startWidth;
newy = Math.floor(Math.random() * endHeight) + startHeight;
iok = 1;
for (j=0; j<i; j++) {
if (Math.abs(eval(arrx[j] - newx)) < 200 && Math.abs(eval(arry[j] - newy)) < 200) iok = 0;
}
for (j=0; j<eval(twinkledata.length / 1); j+=6) {
if (Math.abs(eval(twinkledata[eval(j + 2)] - newx)) < 200 && Math.abs(eval(twinkledata[eval(j + 3)] - newy)) < 200) iok = 0;
}
}
}
document.getElementById(twinkledata[eval(i + 0)].replace(".jpg", "") + "i").style.display = 'block';
document.getElementById(twinkledata[eval(i + 1)].replace(".jpg", "") + "i").style.display = huh[method];
document.getElementById(twinkledata[eval(i + 1)].replace(".jpg", "")).style.left = prevx;
document.getElementById(twinkledata[eval(i + 1)].replace(".jpg", "")).style.top = prevy;
//document.getElementById(twinkledata[eval(i + 0)].replace(".jpg", "")).style.left = newx;
//document.getElementById(twinkledata[eval(i + 0)].replace(".jpg", "")).style.top = newy;
twinkledata[eval(i + 4)] = twinkledata[eval(i + 2)];
twinkledata[eval(i + 5)] = twinkledata[eval(i + 3)];
twinkledata[eval(i + 2)] = newx;
twinkledata[eval(i + 3)] = newy;
}
for (i=0; i<eval(twinkledata.length / 1); i+=6) {
document.getElementById(twinkledata[eval(i + 0)].replace(".jpg", "")).style.left = twinkledata[eval(i + 2)];
document.getElementById(twinkledata[eval(i + 0)].replace(".jpg", "")).style.top = twinkledata[eval(i + 3)];
}
}
function dodivs() {
var i;
for (i=0; i<eval(twinkledata.length / 1); i+=6) {
document.body.innerHTML = document.body.innerHTML + "<div id='" + twinkledata[eval(i + 0)].replace(".jpg", "") + "' style='overflow:hidden;display:block;z-index:3;position:absolute;top:0;left:0;'><img style='overflow:hidden;z-index:7;display:none;' id='" + twinkledata[eval(i + 0)].replace(".jpg", "") + "i' src='" + twinkledata[eval(i + 0)] + "'></img></div>";
document.body.innerHTML = document.body.innerHTML + "<div id='" + twinkledata[eval(i + 1)].replace(".jpg", "") + "' style='overflow:hidden;display:block;z-index:3;position:absolute;top:0;left:0;'><img style='overflow:hidden;z-index:6;display:none;' id='" + twinkledata[eval(i + 1)].replace(".jpg", "") + "i' src='" + twinkledata[eval(i + 1)] + "'></img></div>";
}
}
</script>
</head>
<body id='xbod' align='center' onload=' dodivs(); ' onclick='document.getElementById("mya").click();' style='overflow:hidden;background: url("nightbusy.jpg"); background-color: black;'>
<div id="link" style="overflow:hidden;">
<a id='myaa' style="width:100%;height:100%;display:block;position:absolute;top:0;left:0;" href='#' onclick=' startSurprise(document.getElementById("mya")); '></a>
</div>
<h1 align='center' style="color: yellow;">Starry Starry Night</h1>
<div style="overflow:hidden;" align='center' onclick='document.getElementById("mya").click();' >
<table><tr><td><a id='mya' href='#' onclick=' startSurprise(this); '>Reveal the twinkle below ... </a></td>
<td id='hgad' style='display:none;'><a href='#' onclick=' this.innerHTML = twinkleidea[eval(1 - method)]; method = eval(1 - method); '>Background Image Constant Method</a></td></tr></table>
</div>
<div onclick='document.getElementById("mya").click();' align='center' id='surprise' style='display: none; overflow: hidden;'>
<table cellspacing=10 cellpadding=10 align='center' onclick='document.getElementById("mya").click();'>
<tr>
<td style="display: none; width: 504px; height:667px; background: url('IMG_4286.gif') no-repeat; border: 2px solid green;"><h1 style='color: silver;' align='top' id='mycard1'>My <br>Card <br>Before<h2 style='color: red;' align='center'>Happy Birthday! <br><br><br>Have a Ball!</h3></td>
<td style="width: 504px; height:667px; background: url('IMG4286.png') no-repeat; border: 2px solid green;"><h1 style='color: silver;' align='top' id='mycard2'>My <br>Card <br>After<h2 style='color: red;' align='center'>Happy Birthday! <br><br><br>Have a Ball!</h2></td>
</tr>
</table>
</div>
</body>
<html>