Showing and Hiding HTML elements using Layers

Written 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,repparttar 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 overrepparttar 118042 link, an image appears somewhere onrepparttar 118043 screen. By tweaking you can controlrepparttar 118044 placements. You can seerepparttar 118045 demo, along withrepparttar 118046 online version of this article at:

I've purposely maderepparttar 118047 image appear over a text area so that you don't think it is a simple rollover image effect. The image actually appears aboverepparttar 118048 text.

Below liesrepparttar 118049 code that ofrepparttar 118050 effect that appears above.

Firstrepparttar 118051 HTML part that definesrepparttar 118052 general link andrepparttar 118053 division that definesrepparttar 118054 placement ofrepparttar 118055 image. Take note ofrepparttar 118056 CSS definitions required to setrepparttar 118057 z-index andrepparttar 118058 "hide" attributes. Before testingrepparttar 118059 code, remember to removerepparttar 118060 preceding dots that I have appended so that your email software doesn't readrepparttar 118061 code as some "process-able" content.

DaraNet Cyber World

Written by Omodara Oluwafemi

The ability of a man is best tested when

Cont'd on page 2 ==> © 2005
Terms of Use