Home/ Questions/Q 78495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T20:59:47+00:00

I have this code, which works fine, but I would like to be able

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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.

    • 0