views:

249

answers:

2

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>
+1  A: 

What I do is use DIVs and CSS to set the display parameter to none for hiding and block to show.

<div id="hider" style="display:block"> contents here </div>

and use javascript to show or hide the contents

...
// find the element and it's stored in "elem"
vis = elem.style;
if (showit) {
  vis.display = 'block';
} else {
  vis.display = 'none';
}

where showit is a boolean that indicates what you want to do. You can also check the vis.display and toggle it also. That will show a hidden div and hide a shown div.

jim
Is there a way to add this on to what I have to do everything in one click?
Joshxtothe4
+1  A: 

Play with the display property:

<div id="text1">Some text here</div>
<a href="" onClick="toggleImg('text1');return false;">Show</a></div>
<div id="text1_img" style="display:none"><img src="/your/image_text1.png" /></div>

<div id="text2">Some text here</div>
<a href="" onClick="toggleImg('text2');return false;">Show</a>
<div id="text2_img" style="display:none"><img src="/your/image_text2.png" /></div>

<div id="text3">Some text here</div>
<a href="" onClick="toggleImg('text3');return false;">Show</a>
<div id="text3_img" style="display:none"><img src="/your/image_text3.png" /></div>

And then, a JS function:

<script type="text/javascript">
function toggleImg(myid)
{
  objtxt = document.getElementById(myid);
  objimg = document.getElementById(myid+'_img');

  if( objtxt.style.display == 'block' ) // Show image, hide text
  {
    objtxt.style.display = 'none';
    objimg.style.display = 'block';
  }
  else                                  // Hide image, show text
  {
    objimg.style.display = 'none';
    objtxt.style.display = 'block';
  }

}
</script>

I hope you'll be able to apply this to your needs.

ARemesal
I tried this and cannot get it to work. Where would I put the text and do I need a stylesheet? Basically I am unsure how to adapt my existing page to sue this format?
Joshxtothe4
Ups! I made a mistake (changed a - for a _ ). I've edited the code, try again please.
ARemesal
Hello, I think it is working now, I just wanted to check if it would work with one layer or not, as with the code I pasted?
Joshxtothe4