Rollover Images Without Javascript

Troy Whiteley — Fri, 16 May 2008 05:29:44 +0000

One of the messiest things I have seen is the auto-generated code from Dreamweaver for rollover images. It got me thinking of ways to make the images swap without the need of Javascript. Instantly I thought CSS. It was actually fairly simple to get working.

Take for example this button:

Right now the button doesn’t do a thing. However, if we apply some CSS to it, we get a nice button with a rollover.


.button{
    background:url('url/to/image.png') no-repeat;
    width:20px;
    height:20px;
    display:block;
}
.button:hover{
    background:url(url/to/rollover.png) no-repeat;
}

Now the button will show the image and swap to the rollover when you hover over it. All without Javascript. But, you ask “How do you preload the images without Javascript?”

I laugh, such a simple answer. Put the rollover images at the top of the page, inside of a hidden div.

And there you have it, JS free rollover images.

Simple XHTML Flash Embedding

Troy Whiteley — Sat, 10 May 2008 05:00:08 +0000

The typical way mot people embed flash is pure ugly. Not only is it ugly, but it breaks the XHTML standard. Luckily, there’s a way around it which is much better than the traditional way, and as an added bonus, has a built in flash plugin check without any javascript!

The data in the object tag (beside the param tag) is only called if the flash plugin is not available. Meaning you can put any html you want there as an alternative. I’m sure if you play around with it you will find how much better this is.

dawnerd » xhtml

Rollover Images Without Javascript

Simple XHTML Flash Embedding