Images add a lot of visual interest and can support your content as well when chosen with care and using the "alt" tags and "title" attribute to give additional information. When you use this method when a person places their cursor on the image, a mini text display or "tooltip" appears. This is nice, but it is oh-so Web 1.0. What if instead of this method, you could create a really sleek text display underneath the image?

Just about everyone has seen a popup window, although many people do not use them because Internet visitors find them annoying. But many pop-ups are written in JavaScript and this is the other reason why many people shy away from them. JavaScript can be troublesome in some cases. Of course there are some really helpful ways that you can create a popup to work for you website and bring added value to your website visitor’s experience.

The Cross-Browser Fix is In
If you want the information in your "alt" tags and "title" attribute regarding an image on your webpage to show directly under the image rather than as a tool tip/rollover here’s a great method that uses CSS to do the job.  

CSS is a valuable tool in web design especially in handling the problem of browser compatibility. Depending on the browser software in use, your website may not appear as you intended. The way the browser software handles different aspects of your webpage, for example when you use the "title" attribute for images, can also vary.
There are codes used in CSS that speak directly to the browser software to help them handle the components of your web pages and make your website design more integrated and functional to the visitor as well. Although this method of creating a CSS Popup is semi-advanced, it is a very good way to streamline the way the additional data for your images is delivered.

The Text Pop-Up
Using this method, when a visitor points their mouse to an image instead of having to "hover" and wait for the title to appear, this cool CSS coding will drop down a static field of text underneath the image immediately. With this CSS technique the basic differences between the way FireFox, IE6, Opera and IE7 browsers are addressed.
As with all things in website design, no matter how sleek and simple the coding maybe, once you get it written you must test it in various browsers to see where the code may need tweaking.  You can see the CSS text/image popup coding in action here: http://meyerweb.com/eric/css/edge/popups/demo.html .

To understand how this works, when you look at the source code, you will see that the drop down text is the result of placing a <span> element inside the link, for example:

<a href="http://www.meyerweb.com/other/">Other<span> Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff</span></a>

Way cool, don’t you think? But you don’t want the text to show until requested, you need to include to keep them out of the way until the document loads, you need to use:

div#links a span {display: none;}

Then after the document fully loads, you simply bringing them back, using <display:block> and positioning so that the link text will show correctly:

div#links a:hover span {
display: block;
position: absolute; top: 200px; left: 0; width: 125px;

You can style the appearance of the element is easy, in the demo black and gray were used:

padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;
}

When you hover over the link, the style and color of the link changes and that there is a slight overlay onto the border of the main content area. The gray stripe in the center of the overlay is created by using a border on the link itself:

div#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;
}

By using pixel measurements in the positioning you can make this effect work flawlessly and be free to style it as you choose. In the demo shade of gray are used, but you can accomplish the same effect using a different color scheme.

The really cool thing about this technique is that it works with text AND images: you can create a text popup for your image OR an image popup for text! Just think of all the creative ways you can enhance your visitor’s experience with this little gem of coding.

The Image Pop-Up
To use images instead of text, instead using the <span> simply use the <img>:

<a href="http://www.meyerweb.com/eric/css/">Links<img src="eric.gif">

Again you do not want the images to appear when the document loads, the following style does the job:

div#links a img {height: 0; width: 0; border-width: 0;}

Remember we are dealing with browser compatibility here and the Netscape 6.x browser doesn’t load images with a document. If you use display: none, then your images would not load at all. The result is that it looks like the images are not there because they won't load until you hover over the link.

You resolve this problem by setting the images to have no height and width; technically the browser will load them and have them ready for viewing, but you won’t be able to see them until you hover over the links.

Use this code to make the images appear:

div#links a:hover img {position: absolute;
top: 190px; left: 55px; height: 50px; width: 50px;}

Because all you need to make the image appear, the coding is simpler because there is no styling required. See the demo here: http://meyerweb.com/eric/css/edge/popups/demo2.html

The Problem with Internet Explorer 5

But this technique does have its limitations. If you are using Internet Explorer 5, you should know that this browser does handle the dynamic image sizing it will use and become fixated on whatever parameters you set for the height and width of an image. In this case, using the <display: none/display: block> code in the text popup would not solve the problem either. The result is that once you activate the image popup it remains on the screen, causing the images to stack.

If you want to have even more fun, you can combine text and images in a popup also without using JavaScript: check out the demo of the CSS code working its magic here: http://mikecherim.com/experiments/css_map_pop.php.

Home | Portfolio | How It Works | FAQ | Contact Us | Testimonials | TOS | Let's Start