Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
My (ever growing) repository for useful computing tips, organized by category. I hope that you find many of them useful.
Expand ALT text (MSIE Only) - You probably already know that when a picture fails to load (the file name is wrong, or missing, etc.), the alternate <alt> text is displayed. A lot of times, it's cut off.
What you may not know is that there's a browser setting that fixes this behavior.Tools -> Internet Options -> Advanced Tab -> Accessibility -> (check the "Always expand ALT text for images")
Another default setting that was dropped through the cracks.
Opening Links in a New Window: Using frames, it's as simple as specifying the target window for a link. Today, with CSS & XHTML, it not that simple. The "target" attribute is obsolete in XHTML strict and nothing has been offered up as a replacement. So how do you open a link in a new window?
This is one of those areas where the idealism of standards and the needs of the real World collide. There is no panacea, only tradeoffs.
<a href = "pg.html" onclick = window.open(this.html); return false">
EVERYONE gets to see the page.
We got our domain in Dec04. For the first month, we just moved files from our old domain. The 2nd month, we made some changes. After the 2nd month, we noticed that anyone can anonymously browse our directories. Ack! This is NOT what we want.
The place to change this is the ".htaccess" file, which controls directory behavior and works in a cascading style. (Control them individually, by placing a .htaccess file in that directory -OR- control them in a cascading, directory-tree-fashion, via one file, sitting higher up in the tree.)
The second method is what we are currently employing. Our single .htaccess file is in the top-level directory and looks like:
# Turn on XbitHack for Server-side includes
# Look in htm/html files for php commands
AddHandler application/x-httpd-php .htm .html
# Turn OFF external access to directory indexes
We don't use SSI now, preferring PHP include statements, which makes parsing PHP important (the second bit). Turn off external directory browsing by turning Indexes off (-Indexes). A browse now results in a 403 message, which we can customize.
Type in your address line, to see what having Indexes on (+Indexes) looks like. Then try to see the Indexes off (-Indexes) behavior.
For more information on what you can do with the .htaccess file, read these:
Have a look at the effect of turning Indexes off. First, type randsco.com/openDirectory into your address box. THIS is what it would look like if you have Indexes ON. Then, type randsco.com/SlideShow into your browser address box. Instead of an index listing, you will get a 403 "Forbidden" message.
On the left is a demonstration of the original version of photo-caption zoom. It's a pure-CSS, XHTML-valid, image/caption zoom method. Move the cursor over the image and it will 'zoom' (pop, explode, magnify) to reveal a larger image with a caption. There are a number of image rollover techniques, but this is the first that combines an image with a caption. It looks nice and saves page real estate, sitting as a small thumbnail, until the reader decides otherwise. Most important, the method is practical and easy to implement.
Pioneer Basin (John Muir Wilderness, Calif.) Photo by Brian Ernst
PZ3 Update: 10-Mar-2007 - Fixes for an IE7 bug (multiple right-floated images) & a work-a-round for IE6 and IE7 in quirks-mode.
Added July 2006: PZ3 is here! It's more robust, lighter and REPLACES PZ2. Compared to PZ2, PZ3 is easier to use, needs 72% less code, overcomes a pesky IE z-index problem and can use an infinite range of image sizes (image size is specified in the XHTML, not the CSS). Like PZ2, Photo-Caption Zoom version 3 overlays text. (See demo on the right).
Added Oct 2005: I've developed a more robust "version 2" (named "PZ2"). It adds functionality (and complexity) to the original, PLUS has the added capability to OVERLAY text (no more "element migration" on ZOOM). It is demonstrated here on the right.
A single image is used for both the small and large views. (No need to have a large and a small version). The width is the only size parameter needed (the surrounding <div> expands to the appropriate height). To float the image left or right and to use different images sizes, just use the appropriate class names from within the HTML (no need to modify an external CSS file).
This code is a result of my recent inspiration and chronic frustration regarding the presentation of images and photo captions on web pages. Below, you'll find 8 different image zoom techniques, all of which are demonstrated on their own page & include cut'n-paste CSS/HTML code. Take your pick.