Showing and Hiding HTML elements using Layers
by Amrit Hallan
A long time back I visited a site that had a very fancy, animated navigation
bar. Now, as a professional web developer, I'm not in favor of DHTML-supported,
fancy navigation bars, but it was very fascinating. What they had done was,
whenever you hovered your cursor over a link, a big, comics-type dialog balloon
appeared to give further details of that link. I wondred how they did it, but
then it slipped out of my mind.
That technique uses layers and Cascading Style Sheet definitions, and I'm going
to tell you here, how it is done. Nothing pyrotechnic, but it'll pay a way to
more complex tasks.
First, the demo. I believe once you visually see it, you'll understand better
what I'm trying to accomplish here. Given below is a link. If you take your
cursor over the link, an image appears somewhere on the screen. By tweaking you
can control the placements. You can see the demo, along with the online version
of this article at:
http://www.bytesworth.com/learn/dhtml00001.asp
I've purposely made the image appear over a text area so that you don't think it
is a simple rollover image effect. The image actually appears above the text.
Below lies the code that of the effect that appears above.
First the HTML part that defines the general link and the division that defines
the placement of the image. Take note of the CSS definitions required to set the
z-index and the "hide" attributes. Before testing the code, remember to remove
the preceding dots that I have appended so that your email software doesn't read
the code as some "process-able" content.
.Bring Your Cursor Here and See The Image .<div style="position: relative;
z-index: 1; top: -60px; left: 30px; visibility: hidden" id="piccy"> .<img src="/graphics/contact.gif">
.</div>
After this comes the quintessential JavaScript that actually performs the act.
In between I've inserted comments using the way they are used in JavaScript,
that is, using //.
.<script language="javascript">
if (document.layers) { appear = 'show'; disappear = 'hide'; } else if (document.all)
{ appear = 'visible'; disappear = 'hidden'; }
// Both Netscape and IE handle layers differently, and have different // syntax
for handling their behavior when it comes to handling layer // attributes. // So
whereas IE uses 'show' and 'hide,' Netscape uses 'visible' and // 'hidden'. So
we check and assign the appropriate values beforehand.
function showpic(picture) { var thispicture; if (document.layers) { thispicture
= document.layers[picture]; } else if (document.all) { thispicture =
document.all(picture).style; } thispicture.visibility=appear; }
function hidepic(picture) { var thispicture; if (document.layers) { thispicture
= document.layers[picture]; } else if (document.all) { thispicture =
document.all(picture).style; } thispicture.visibility=disappear; } .</script>
So this is how it works!
About the Author: Amrit
Hallan is a freelance web designer. For all web site development and web
promotion needs, you can get in touch with him at
http://www.bytesworth.com.
For more such articles, visit
http://www.bytesworth.com/articles
and
http://www.bytesworth.com/learn
You can subscribe to his newsletter [BYTESWORTH REACHOUT] on Web Designing Tips
& Tricks by sending a blank email at
bytesworth-subscribe@topica.com .
Source of article:
www.goarticles.com
| |
|