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,
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
link, an image appears somewhere on
screen. By tweaking you can control
placements. You can see
demo, along with
online version of this article at:
http://www.bytesworth.com/learn/dhtml00001.asp
I've purposely made
image appear over a text area so that you don't think it is a simple rollover image effect. The image actually appears above
text.
Below lies
code that of
effect that appears above.
First
HTML part that defines
general link and
division that defines
placement of
image. Take note of
CSS definitions required to set
z-index and
"hide" attributes. Before testing
code, remember to remove
preceding dots that I have appended so that your email software doesn't read
code as some "process-able" content.