This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Colly’s CSS rollover generator

4th December 2004

Further to the previous post detailing multi-element rollovers, incorporating background color and XHTML text with images, I have created a pretty sturdy thing called Colly’s advanced rollover generator.

By removing the advanced fields, you can simply create a standard “sliding doors” rollover, or use the extra fields to create an advanced rollover with background and text elements. The CSS produced is lean and clean, and I’ve included a few extra fields to help you tighten your design further.

Step one - define the CSS

By using Malarkey’s excellent Trimming form fields tutorial, it is easy to get rid of the fields required to create advanced rollovers, leaving basic fields to power the rollover. Otherwise, to create a more advanced rollover, you just follow the basic instructions. It pays to create a “sliding doors” image first of all, though. A sliding doors image consists of the two image states side-by-side, equal in width. So, a 200px width image would sit next to a rollover version - also 200px, creating a sliding door image of 400px. Sliding doors remove the need for two images, and reduce flickering in some browsers. I have coded in a reference to one of my images in the image field for you to try.

Step two - complete CSS, XHTML and example

The generator produces simple, lean CSS, and successfully removes unwanted styles from the CSS. Not quite what you wanted? No problem - hit the back button and keep defining the CSS until you are happy with the image.

Let me know what you think

This is my first CSS generator - and I’d like to make more. The PHP did give me a headache, but I’m alright now. Maybe I’ll make an other for the ticked-off links technique. Anyway, any opinions welcome.

Colly’s advanced rollover generator.

Responses