The first thing you need to know is...
CSS has two special attributes, the first one is "display" and the second is "visibility".
The difference between these two goes like this.
"display": has many properties or values, but the ones we need are "none" and "block". "none" is like a hide value, and "block" is like show. If you use the "none" value you will totally hide what ever html tag you have applied this css style. If you use "block" you will see the html tag and it's content. very simple.
"visibility": has many values, but we want to know more about the "hidden" and "visible" values. "hidden" will work in the same way as the "block" value for display, but this will hide tag and it's content, but it will not hide the phisical space of that tag. For example, if you have a couple of text lines, then and image (picture) and then a table with three columns and two rows with icons and text. Now if you apply the visibility css with the hidden value to the image, the image will disappear but the space the image was using will remaing in it's place, in other words, you will end with a big space (hole) between the text and the table. Now if you use the "visible" value your target tag and it's elements will be visible again.
For example of what I'm saying take a look to the following images.
This is how it's looks if you use the "block" value for the display attribute.
This is how it's looks if you use the "none" value for the display attribute.
This is how it's looks if you use the "visible" value for the visibility attribute.
This is how it's looks if you use the "hidden" value for the visibility attribute.
I prefer to use the "display" atribute.
This is how it's looks the source.
HTML
<img style="display: block;" src="the_source_img_path" width="100" height="100" />
or
HTML
<img style="display: none;" src="the_source_img_path" width="100" height="100" />
Now if you want to hide or show this image using a false link or a form button please follow the following instructions.
first create the image html source...
HTML
<img id="myIMG" style="display: none;" src="the_source_img_path" width="100" height="100" />
... and place a "none" value for the display atribute and add an id element to the img source, "myIMG" for example.
Now create a false text link...
HTML
<span style="color: blue; text-decoration: underline; cursor: pointer;">Click Me</span>
now lets add an "onclick event" to that span tag
HTML
<span onclick="if(document.getElementById('myIMG').style.display=='none') {document.getElementById('myIMG').style.display='block';} else {document.getElementById('myIMG').style.display='none';}" style="color: blue; text-decoration: underline; cursor: pointer;">
Click Me
</span>
Click Me
</span>
This javscript source will hide or show the image in the moment you click over the false link.
The same thing can be applied to a form button.
If you need to re-use the javascript source you can create a simple function, for example...
CODE
<script>
function changeme(id, action) {
if (action=="hide") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
</script>
function changeme(id, action) {
if (action=="hide") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
</script>
You can call the function using the same way as for the previous example.
HTML
<span onclick="changeme('myIMG', 'hide');" style="color: blue; text-decoration: underline; cursor: pointer;">Hide the image</span>
HTML
<span onclick="changeme('myIMG', 'show');" style="color: blue; text-decoration: underline; cursor: pointer;">Show the image</span>
Just remember to add the function at the begining of your html source inside your head tags.
Well, thats all for now, I will post more advance ways to implement this little trick (tip).
Remember, if you need help on this topic, just send me a PM or post directly in here.
Att.
v.DragonEyE.n09
P.S thank you "twitch" for the TIP
