刪除文本圖層並用圖像替換

我有這個代碼，它工作正常，但我希望能夠使它當圖像出現文本層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

刪除文本圖層並用圖像替換

回答

相關問題