удаление текстового слоя и замена на изображение - PullRequest
Новая
       12

удаление текстового слоя и замена на изображение

0 голосов
/ 27 ноября 2008

У меня есть этот код, который отлично работает, но я бы хотел, чтобы при появлении изображения текстовый слой исчезал, и была бы ссылка для возврата текста и удаления изображения. Как бы я это сделал ... что-то связанное с изменением isibility и 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>

Ответы [ 2 ]

0 голосов
/ 27 ноября 2008

Играть со свойством отображения: 

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

И затем функция JS: 

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

Надеюсь, вы сможете применить это для своих нужд.

0 голосов
/ 27 ноября 2008

Что я делаю, так это использую DIV и CSS, чтобы установить для параметра отображения значение none для скрытия и блокировки отображения. 

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

и используйте JavaScript, чтобы показать или скрыть содержимое 

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

где showit - логическое значение, указывающее, что вы хотите сделать. Вы также можете проверить vis.display и включить его тоже. Это покажет скрытый div и скроет показанный div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...