It is a common request to apply certain image effects to a page such as rollover menus and drop shadows. We'll take a look at how to do these, and more. There are plenty of so-called "eye-candy" modules, particularly those that implement jQuery, which will help to do other similar techniques. By examining how themes are created, it is possible to create new effects by building on what we learn here.
A common need with sites is to use graphical menus, sometimes with rollover images. We'll tackle both the needs here by creating a header menu using the following image named primary-links.png, which is 420-pixels wide and 80-pixels high and is placed into the theme's /images folder:
The top-half of the image is meant to be the menu as it appears on the screen, while each section of the bottom-half will be displayed when the mouse cursor rolls over a menu item.
First, let's take a quick look at how menus are created. In Drupal, we have three built-in menus with the...