Search
Recommended Products
Related Links


 

 

Informative Articles

Content Management Systems (CMS): What They Are And Why We Love Them…
There is a buzz in the online community about a technology that empowers the average computer user with the ability to create and maintain their very own web presence. In the past, individuals who took interest in having and operating their own...

Designing Professional Web Pages
If your Web site doesn't project a professional and polished image to your visitors, your credibility and that of your products and services will suffer. Image is everything--especially online where your competitor is only one mouse click away! ...

Free Automatic Content - Can the Search Engines See Yours?
Ever heard any of this advice? * Content Is King - so Search Engines and Visitors will Love your Site * Make Your Site Sticky - so Visitors will Return * Add New Content Regularly - so Search Engines will Rank your Site Higher Are they...

Spice Up Your Web Site With Rotating Images
Normally I don't like moving objects when I arrive at a web site. It distracts visitors from getting to the content. However, many web sites could enhance their visitor's experience by creating rotating images on the home page. Here's a good...

WYSIWYG Versus Coding: HTML With A Purpose
After years of working with entrepreneurs who developed their first web site using an image-based editor, the new world of internet marketing has placed a stronger emphasis on web development that conforms to technical concerns such as search...

 
Google
Showing and Hiding HTML elements using Layers

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
.
.
.