Removing a text layer and replacing an image

I have this code that works fine, but I would like to be able to do it like this, when the image appears, the text layer disappears and there would be a link to return the xt and remove the image. How would I do it ... 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>

      

0


source to share


2 answers


Play using 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, the 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 can apply this to your needs.

0


source


I am using DIVs and CSS to set the display option to none for hide and block for show.

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

      

and use javascript to show or hide content



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

      

where showit is a boolean indicating what you want to do. You can also check vis.display and toggle it as well. This will show the hidden div and hide the shown div.

0


source







All Articles