Question

我有这个代码，它工作正常，但我希望能够这样做，当图像出现时文本图层消失，并且会有一个链接将xt带回并删除图像。我该怎么做...，与改变可能性和覆盖有关？

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

Answer 1

我所做的是使用DIV和CSS将display参数设置为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。

Answer 2

使用display属性进行游戏：

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

我希望你能够将它应用到你的需要。

删除文本图层并替换为图像

2 个答案: