Keith Warne Organization
The Close Family - as opposed to extended
A collection of photos taken at the founder's home in Manila. These interactive images depict the family on an average Sunday during the cooler winter period. As you can see no one is using the swimming pool as the water is quite cool. Soon the temperatures will rise and the electricity costs will soar as air conditioners are flung on to left and right.
Technical Note (on the menu system)
Here's how it's done. In every case, the "caption" text is a span
element inside the actual hyperlinks. Here's one example from the source of this document:
<a href="http://www.meyerweb.com/eric/css/">Links<span>A collection of things which interest me, and might interest you</span></a>
To prevent the text from showing up when the page loads, I have the following style:
div#links a span {display: none;}
So they're gone, removed entirely from the document flow. Bringing them back, then, is a simple matter of switching the display
to block
and positioning the element whenever the associated link is hovered over with the mouse pointer. Thus we get the first two lines of this rule:
div#links a:hover span {display: block; position: absolute; top: 200px; left: 0; width: 125px; padding: 5px; margin: 10px; z-index: 100; color: #AAA; background: black; font: 10px Verdana, sans-serif; text-align: center;}
The last three lines relate to how the element will be styled when it appears, but the first two cause it to be made visible (display: block;
) and position it appropriately.
Want to have even more fun? How about icons that appear on rollover?