Search
Recommended Products
Related Links


 
 

 

 

Informative Articles

Can I Optimize A Site Designed With Frames?
Can you optimize a site designed in frames? Of course you can! The question should be, "how effectively can I optimize a web sire designed in frames?" Framed sites – in my opinion – have little use in today's web design....

How I Slashed The Load Time For My Website By 200-300%...And So Can You, For Yours!
Here is my latest article. It may be freely used in ezines, on websites or in e-books, as long as the Resource Box is left intact. I would appreciate notification of where it was used, and if possible, a copy of the ezine or newsletter that it was...

MAMBO- a full-featured content management system
Content management systems (CMS) store and manage an organization's electronic document and Web content so that even the non-technical authors and employee of the company can reuse the information across different applications which is otherwise...

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

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

Top 7 Fundamentals For Google Optimization! Google Seo Tips And Techniques By Expert!
Who doesn’t want to get Top Ranking Positions in Google? 1st Page Placement in Google is NOT difficult, you need to follow Google Optimization Guidelines, and this Article has Summary of the Seven Fundamentals for Google Optimization. Google...

Web Designing Tips
Web Design Tips: Easy That’s how you’d like life to be, right? Especially when you’re creating a website on your own. But that doesn’t mean you want the site to look severe and just functional. you want it to be pretty...

Website Colors
In 1994, Netscape defined 216 colors that have priority in browsers based on the 256 colors displayed by an 8-bit system. 40 colors display differently between PCs and MACs and are therefore eliminated. These 216 fixed colors, known as web...

what is ajax?
Hello, We were getting a number of querries from our clients and friends, asking about what AJAX is? With the development of Microsoft's Live, everyone is going crazy about AJAX. So, we at Xaprio Solutions thaught of publishing this small...

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

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