brian

jake

A couple things brought me to research this technique. One was that I wanted to be able to style things in the manner of Jeff Croft. You can notice that on his blog when you mouseover an entry the links highlight. Their color goes from a dark grey (the rest of the text is a lighter shade) to orange.

The second was that a few web sites use the style display: block to create some fancy looking links. A couple of them are; Adaptive Path, and twothirty. Adaptive Path uses the technique to highlight two boxes towards the bottom left which contain pictures and some extra text besides just a generic link. On the twothirty page it is used to bring out their two primary services, website design, and web application interface design.

I wanted to combine these two techniques because to add any block elements, like a form, inside the link tag would function, but not validate. And Jeff's nice little highlight feature uses the :hover declaration on something other than a link. This validates, but does not function on many browsers.

I've seen something similar done using inline code and setting things like this.style.backgroundColor, but that destroys the whole notion of CSS. Also this would get even more unruly trying to style other elements within the text block.

So... I tried using javascript but naturally all I need is someone turning it off, and the whole thing breaks down...

Update: now I feel silly, just goes to show how testing throughly is a good idea. What I did is actually javascript, however, it cleans up the code a little. And the reason I didn't notice it at first was because I only turned off the javascript in Firebird. Firebird could still see the hover declaration and worked as intended. IE just stops all together. Oh well, maybe it'll still help someone out there.

To view what the heck I'm talking about, I have set up a local page. I tried to give the code some structure, but if anyone has problems with figuring it out, I can try and clean it some more.