Hello,
I have this code, which works fine, but I would like to be able to make it so when an image appears the text layer disapears, and there would be a link to bring the xt back and remove the image. How would I do this..., something to do with changing isibility and overlaying?
<html>
<script type="text/javascript"><!--
function sbox(boxName,xname) {
theBox = document.getElementById(boxName);
theBox.className = xname;
}
//-->
</script>
<style>
#main
{
position: absolute;
width: 800px;
height: 600px;
}
.test1
{
position: absolute;
top: 20px;
width:80px;
height: 80px;
border-style: solid;
border-color: green;
}
.test2
{
position: absolute;
top: 120px;
width:80px;
height: 80px;
border-style: solid;
border-color: red;
}
.test3
{
position: absolute;
top: 220px;
width: 80px;
height: 80px;
border-style: solid;
border-color: blue;
}
.test4
{
position: absolute;
top: 320px;
width: 80px;
height: 80px;
border-style: solid;
border-color: black;
}
.test5
{
position: absolute;
top: 20px;
width:80px;
height: 80px;
border-style: solid;
border-color: yellow;
}
#test6
{
width: 80px;
height: 80px;
border-style: solid;
border-color: green;
}
#test7
{
width: 80px;
height: 80px;
border-style: solid;
border-color: green;
}
</style>
<div class='test1' id="test1"><a href="#" onclick="sbox('test1', 'test5'); return false;">test1</a></div>
<div class='test2' id="test2">test2</div>
<div class='test3' id="test3">test3</div>
<div class='test4' id="test4">test4</div>
</html>