<html>
<head>
<meta charset="UTF-8">
<title>Overlaying via z-index, position:absolute, opacity, same size Primer Tutorial ... RJM Programming ... July 2014 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<style>
iframe {
height:620;
width:880;
position:absolute;
top:36;
left:20;
opacity:0.95;
z-index:2;
}

img {
height:620;
width:880;
position:absolute;
top:36;
left:20;
opacity:0.3;
z-index:3;
}

</style>
<script language="JavaScript">
var url = "http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+5&e0=+6";

function onloading(inidea) {
if (inidea != "") {
var ais = prompt("For parabola formula ax² + bx + c = 0 what is the value of 'a'?", "1");
if (ais != "") {
var bis = prompt("For parabola formula ax² + bx + c = 0 what is the value of 'b'?", "0");
if (bis != "") {
if (bis.indexOf("-") == -1) bis = "+" + bis;
var cis = prompt("For parabola formula ax² + bx + c = 0 what is the value of 'c'?", "-0.25");
if (cis != "") {
if (cis.indexOf("-") == -1) cis = "+" + cis;
url = "http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=" + ais + "&e1=" + bis + "&e0=" + cis;
}
}
}
}
document.getElementById('x_axis').style.display='block';
document.getElementById('x_blank').style.display='block';
document.getElementById('x_blank').src = url; // + "#chart_div";
}

</script>
</head>
<body align="center" onload="onloading('');">
<h1 align="center">Overlaying via z-index, position:absolute, opacity, same size</h1>
<iframe frameborder=0 src="javascript:false" style="display:none;" id="x_blank"></iframe>
<img onclick="onloading('ask');" src="xaxis.png" style="display:none;" id="x_axis"></img>
</body>
</html>