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

我有这个代码，它工作正常，但我希望能够使它当图像出现文本层disapears，并且会有一个链接将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>

来源

2008-11-27 Joshxtothe4

播放与显示性能：

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

我希望你能够将此应用到您的需求。

来源

2008-11-27 15:07:13 ARemesal

我试过了，无法启动它。我会在哪里放置文本，并且需要样式表？基本上我不确定如何适应我现有的网页来起诉这种格式？ – 2008-11-28 12:43:17

我所做的就是使用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。

来源

2008-11-27 14:45:02 jim

有没有办法将这一点添加到我必须做的一切点击？ – 2008-11-28 12:30:30

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

回答

相关问题