Skip to main content

CSS Rollover Buttons

My work place tasked me with trying to be as purist as possible with HTML and CSS for an interface their web application. Without any formal web development background, I have always been one of those who intermingle the code and have presentation within the HTML.

I think it came out pretty well. I separated design from content in addition to separating the dynamics. Mind you, I even separated out all the server talk and taught myself some XML/XSL in the process. After all that I learnt Ajax, without realising it.

One little nugget from all this is creating a pure CSS rollover button for the menu, without Javascript. There's alot of websites that help out in this, but they are not "pure" as they involve you including the image in the HTML and to perform some shifting with the image. Hell no to that.

My way leaves out the usual ul tag and dives straight into the anchor (a) tag as it should be:

a href="links.htm" id="linksButton" title="Links">

Embedded within the anchor is a blank image, which can be a 1-pixel transparent GIF. The image size but be set due to browsers behaving differently.

img src="assets/buttons/blank.gif" weight="45" height="45" title="Links" />

That's fine enough, but the magic is the assigned id for each anchor which must, obviously, be unique. The id is used within the CSS. First for the initial UP state:

#linksButton img {
background-image:url('./buttons/linksBtn_up.gif');
background-repeat:no-repeat;
width:45px;
height:45px;
}

Here I set the desired image icon as the background image and ensuring that it does not repeat, for safety measures. Due to browser quirks you need to set the size of the image tag here as well.

The rollover is set using the same id:
#linksButton:hover img {
background-image:url('./buttons/linkBtn_down.gif');
}


And that's it. You will have a pure CSS rollover, without any manky HTML and Javascript. This is also accessible in case you want to fulfill the WAI Triple-A Compliant guidelines by the W3C.

Beacuse it's easy, I am now a fan of puritan coding of HTML and CSS. Spread the love.

Comments

Popular posts from this blog

Open Source alternatives to Adobe Creative Suite

With the take over of Macromedia by Adobe, they have increased their arsenal of design packages, as well as the price. No-one can do pretty much without the popular package of Photoshop for their images, and Dreamweaver for websites, especially aspiring design students who do not have much money.

Nevertheless, open source software has come to save the day. What is open source software? In a nutshell it is free software with its source-code freely available to those who would like to expand or improve on the software. To expand further, anyone who’s tinkered with the source code such as optimisation or additional functionality can resubmit it back to the holders and let others enjoy the fruits of your labour.

I have trawled through the World Wide Web to find out how everyone can benefit from Open Source to build up their own studio and compete against Adobe Creative Suite. All this for free, apart from the cost of the Internet. I am planning to have a facility where you can purchase th…

Open Source alternatives to Adobe Creative Suite update

Oh yes, an update to an earlier post about getting hold of free or Open Source alternatives to Adobe Creative Suite.

I actually forgot to mention about Adobe ImageReady, which gets bundled with Photoshop. There are a number of basic animation tools, but none provide flexibility similar to ImageReady. Fortunately, Open Source lovers are in for a surprise in the form of GIMP Animation Package. This link will take you to the Windows download site as I cannot find any references to this for the Mac OS. Chances are that it could be part of the Gimp.app download, but I haven't had time to inspect this.

The Creative Suite package includes Adobe Bridge, which is a thumbnail viewer to convert images and open them up in any Adobe application for editing. No matter how they would try to trump up its name, it is still a thumbnail viewer. The best free application out there for this is IrfanView. Need I say more?

Are there any pixel pushers out there, who prefer to simply draw their own pics? Why…

Dangers of social networking

It has been waaayy too long without any sort of update and I did not want anyone to think that I left the world unexpectedly. But I just wanted to get something off of my chest... social networking.

Okay, okay. I'm not trying to be a soothsayer and to get you to stop using social networking (like Facebook, MySpace, etc). There are indeed many uses where social networking helps businesses reach out to a wider audience and for individuals to regularly keep in contact with family around the world. However, if not used right it can turn your world upside down which is what this article is all about.

The following article describes a number of factors to consider so that your safety and well-being are not compromised.
Personal Safety You should pay particular attention to the public/private settings of your account. Keeping your whole profile public would leave you open to potential predators. Now these very naughty people disguise themselves under fake profiles so may realise it too l…