Tweet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Inner HTML</title>
<style type="text/css">
/*<![CDATA[*/
body
{
background-color:#aaaaff;
}
#dvone
{
position:absolute;top:5%; left:2%;
}
#dvtwo
{
position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;
}
button
{
width:100px; border: solid 2px #000000; margin:2px;
}
#tbltone
{
border: solid 1px #000000; background-color:#ffffff;
}
#information
{
width:200px; height:200px; border: solid 1px #000000; text-align:center;
}
#dvthree
{
width:200px; height:200px; padding:10px; overflow:auto;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function clearcell()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'This cell opens onload.<br /> If required you can leave this blank .'+
' As you will see scrollbars will appear automatically.</div>';
}
function first_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'+
' Praesent blandit venenatis purus. Integer massa libero,'+
' vehicula id, consequat sed, tincidunt nec, purus.'+
' Class aptent taciti sociosqu ad litora torquent per conubia nostra,'+
' per inceptos hymenaeos. Suspendisse potenti. Class aptent taciti '+
'sociosqu ad litora torquent per conubia nostra, per inceptos '+
'hymenaeos. Sed cursus feugiat mauris.'+
' <br /><a href="#"onclick="clearcell()">close</a></div>';
}
function second_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'Here is some more text.<br />'+
'<a href="#"onclick="clearcell()">close</a></div>';
}
function third_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'You can also use images.<br />This is an image<br />'+
'<img src="http://mysite.freeserve.com/achelous/anim2.gif"alt=""/><br />'+
'<a href="#"onclick="clearcell()">close</a></div>';
}
function fourth_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'<object type="application/x-shockwave-flash" data="http://mysite.freeserve.com/achelous/circle.swf" width="180" height="155">'+
'<param name="movie" value="http://mysite.freeserve.com/achelous/circle.swf" /></object><br />'+
'<a href="#"onclick="clearcell()">close</a></div>';
}
//]]>
</script>
</head>
<body onload="clearcell();">
<div id="dvone">
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="first_text()"> Lorem </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="second_text()" > More text </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="third_text()" > An image </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="fourth_text()" > A flash </button>
</div>
<div id="dvtwo">
<table id="tbltone"><tr>
<td id="information"></td>
</tr></table>
</div>
</body>
</html>
thead
Comment