Image and text query
I have a very simple html page here:
http://www.nomorepasting.com/getpaste.php?pasteid=22407
And I have 4 layers per page. The reason for this is that the structure of a much more complex site, I simplified it to ask my question. Basically, I want to be able to click on various links in layer 2 and change the image in layer1, however, as I found to do this:
<script type="text/javascript"><!--
function sbox(boxName,xname) {
theBox = document.getElementById(boxName);
theBox.className = xname;
}
//-->
</script>
Results in text that go away what I need and also a way to click and replace any image with text. I found an alternative javascript code but was unable to apply it to my html page.
<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>
What's the easiest way to do this without redesigning my page? note: I don't want to use a framework, I want to understand how it's done and do it for myself.
My additional question is included if layers are supposed to replace tables: Is it always helpful to use tables if using css instead? Is it easy to use layers to create row and column equivalents just for formatting text data and not for site structure?
source to share
(In response to Joshxtothe4's comment ... I need more space for an answer)
Changing the class back to class1 will unfortunately not show the text. The code I gave will hide the text, always if found in between. You can do something like below and add another CSS statement that will hide the span if class4 is used. Then you don't need to have this code in javascript. Probably a cleaner solution:
<html>
<head>
<style type="text/css">
.class1{color:#000;}
.class2{color:#00f;}
.class3{color:#0f0;}
.class4{color:#f00; background-image:url('someimage.jpg');}
.class4 span { display: none;}
</style>
</head>
<body>
<script type="text/javascript">
function sbox(divid, classname)
{
document.getElementById(divid).className=classname;
}
</script>
<div>
<a href="#" onclick="sbox('div1','class1');return false;">Reset</a><br/>
<a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
<a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
<a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
</div>
<div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div>
</body>
</html>
As for the image as a background, this is probably the best choice. The only problem was that setting background images does not hide the foreground text. You always need to hide this text somehow
source to share
Tables for tabular data (think Excel). If you have a grid of data to display, use a table. When it comes to lyouts pages, use CSS positioning.
Also, obsessive use of DIV is not the best way to use CSS. Getting into the habit of wrapping everything in a DIV is a practice known as "magic mania" and you can use Google for reasons why it's not good.
source to share
Well, firstly, when setting the background image, it will not hide the text inside the DIV, no matter how high you set the Z-Index. It just doesn't work. One solution could be to wrap the inner text in between and hide the range when you want the background div to show. But as per your question, you wouldn't want to change your html structure much, but you will need to in order to get what you want, I suppose.
Sample code:
<html>
<head>
<style type="text/css">
.class1{color:#000;}
.class2{color:#00f;}
.class3{color:#0f0;}
.class4{color:#f00; background-image:url('someimage.jpg');}
</style>
</head>
<body>
<script type="text/javascript">
function sbox(divid, classname)
{
document.getElementById(divid).className=classname;
if(document.getElementById(divid+"_text")!=null)
document.getElementById(divid+"_text").style.display="none";
}
</script>
<div>
<a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
<a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
<a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
</div>
<div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div>
</body>
</html>
And I agree with TravisO, HTML tables should be used for tabular data, not as a layout engine. There are also some CSS oddities with tables when you have a large hierarchy of tables / rows / etc.
source to share