Removing a text layer and replacing an image
I have this code that works fine, but I would like to be able to do it like this, when the image appears, the text layer disappears and there would be a link to return the xt and remove the image. How would I do it ... 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>
0
source to share
2 answers
Play using 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, the 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 can apply this to your needs.
0
source to share
I am using DIVs and CSS to set the display option to none for hide and block for show.
<div id="hider" style="display:block"> contents here </div>
and use javascript to show or hide content
...
// find the element and it stored in "elem"
vis = elem.style;
if (showit) {
vis.display = 'block';
} else {
vis.display = 'none';
}
where showit is a boolean indicating what you want to do. You can also check vis.display and toggle it as well. This will show the hidden div and hide the shown div.
0
source to share