Caught in the DHTML crosshairs - Web Building

CNET Tech sites: Price comparisons | Product reviews | Tech news | Business solutions

Search

CNET : Web Building : Stupid Web Tricks : Caught in the DHTML crosshairs

Discussions | Reviews | Columns | Graphics Library | Script Library

Caught in the DHTML crosshairs
By Holly Cunningham
(8/3/01)

The first step in dealing with your problem is naming it, so say it with me: "Gaming." After all, "Bam!" was your first word, and you weren't the only kid on the playground pretending that the stick you held had a scope and a trigger. Even if you cover your fetish under the guise of orthoptics or reflex building, we all know that it's not necessary to hot-click your mouse around a spreadsheet like you're busting caps. But it's fun, so why not add a little arcade vision to your Web site with the old up-periscope crosshair trick?

X marks the spot
Actually, a really big t marks the whole page, unless you hold your head at a 45-degree angle. Just place our style-and-script combo into the <head> of your Web page. You should see on this very page the lovely sniper-vision results. To customize the color of your targeting lines modify this first line in the script:

var hairColor="red";

Replace red with a hex code or whatever color name you prefer.

If you're put off by the way the cursor diminishes the menacing effect with its innocuous arrow or cartoon hand, you can change the style to the less visible and more thematically matching crosshair cursor by removing the /* and the */ from the <style> section:

/* BODY,IMG,A {cursor:crosshair} */

Swapping skeet
If you're going to go all out (aren't you?), you can mimic a real scope by having images come into focus, react in terror, and so on (like the blurry fellow to the right) upon mouseover. If you go with the crosshair cursor, consider some way of indicating if the image is also a link, since the cursor won't change in its usual way. You'll need two versions of each affected image, and our old but trusty Mouseover machine can help you generate the image-swapping code.

Our thanks and Kevlar-coated gratitude to Jim Dee, who asked us for the crosshairs trick. He didn't know that we had promised not to talk about it in our anger-management classes.

What stupid Web tricks have you seen lately? Send us a URL for your favorite, and we might show you how to implement it.

More Stupid Web Tricks coverage

Holly Cunningham, a frequent contributor to CNET Builder.com, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

Cursor appearance

Brave Buzz members want to know how to further mess with the cursor.
In Builder Buzz

Low Priced PC's
PC's from $799

1.8GHz now available!

Great PC's, Low Prices

Stupid Web Tricks
From CNET Web Building

Mouseover magic
From CNET Web Building

The X-ray mouse
From CNET Web Building

Make a mouse-chasing message
From CNET Web Building

CSS2 cursor property
From W3C

Outpost.com

Check out our 1st time buyer perks! • New customers get free shipping! • Free t-shirt with first purchase!

CNET Networks: CNET | GameSpot | mySimon | TechRepublic | ZDNet

About CNET |