Image Maps With Pop-Up Tool Tips
Using an unordered list, a couple of images, and a little CSS, we can create an accessible "image map" with pop-up tool tips that provide our readers more information on the links the map contains. There are several techniques out there for doing this, but, unlike some, the one outlined here has the advantage of working in older versions of Internet Explorer.
Related Tutorials
Pop Up Menu 3 - ImagesThis tutorial expands on my last CSS pop up menu tutorial. This time I will focus on how to use image "buttons" in the menu rather than plain text.
CSS Pop Up Menu 3 - Images
This tutorial expands on my last CSS pop up menu tutorial. This time I will focus on how to use image "buttons" in the menu rather than plain text.
CSS Pop Up Menu 2 - Horizontal Menus
This second part focuses on changing the menu so that it is horizontal, with the pop ups dropping downwards.
CSS Pop Up Menu 2 - Horizontal Menus
This second part focuses on changing the menu so that it is horizontal, with the pop ups dropping downwards.
CSS Pop Up Menu
This tutorial features a pop up menu written purely in CSS. The code uses XHTML lists which are then styled to produce the hover effects. No Javascript is used apart from IE browsers as they will not display the hover effect without it.
CSS Pop Up Menu
This tutorial features a pop up menu written purely in CSS. The code uses XHTML lists which are then styled to produce the hover effects. No Javascript is used apart from IE browsers as they will not display the hover effect without it. More on that later though, first off we'll begin by creating our menu in XHTML.
Improved CSS Hover Images
You see a lot of hover effects on web nowadays. When you hover your mouse cursor over a link it usually changes to something else - It doesn't matter if the link is an image or just text, there's usually some sort of hover effect in place. If it's a graphical link the hover effect is usually another image displaying the hover effect. This image is often preloaded on page load so that the user sees the effect right away, but there's also another way to do it. How about using just one image and changing its state/position it with CSS?
CSS Background Examples
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.
CSS3 Border Image
Use the border-image CSS3 property to create some new and impacting borders. The first thing to do is create your basic border, this will be filled by your border images or as a fallback for browsers not supporting border-image.
CSS top image preloader
This tutorial will show You, how to use nice GIF animated preloaders for top images (or any other image).