Written by:
2009/02/12 04:00 PM 

Why do I write this when there are so many tutorials on this very subject. Well for one writing about a topic, helps me learn. Two, every body has a different spin on the topic or different style of writing. Three, I think its cool, and I do not want to go searching for this because I know it is right here on my blog. Four, maybe some have never heard of this or tried it out, now is your chance.

Using something like Dynamic buttons will save you loads of time which otherwise will be used creating graphics. It also increases the page load times, depending on the amount of buttons you have on the page. This is what it might look like. You would obviously change the styling to suite you particular site and needs.

DNN Dotnetnuke Search Engine Optimisation

We want our buttons to be super-flexible. That means we want the button to expand and shrink according to the text length of the button. For that, we'll use a method commonly termed as the sliding doors technique. Basically it is two complementing images creating the illusion of a single, stretching image.

Our button will be a basic < a> tag with a nested < span>, styling to make great looking buttons. Each tag containing a different slice of the background image. This is what the HTML might look like:

< a class="button" href="#">< span>Integralwebsolutions< /span>< /a>

We want our buttons to be flexible. That is they must have the ability to expand and shrink in accordance to the text length of the button. We will have to make the background image expand with the size of the button's text. To do this we will use a method called the sliding doors technique. Basically two complementing images creating the illusion of a single, stretching image.

We would need to create just two graphics. We need a normal state button, and a clicked state button We will include both states in a single image. To switch between normal and pressed state, we'll simply shift the background image vertically, revealing a different images for the alternate button state. We can use this CSS trick which allows us to perform the switch without the need for any JavaScript. The part of the image that will accommodate the button text will be set to a reasonable 300px, the height we'll set to 36px, or what ever you desire. I have just mirrored the button to give a different image. You might want to do something more fancy.

Styling

Next, we need to add some CSS so that we can make this whole thing work together. You can place the buttons anywhere and anyhow on your page. Using tables, divs, adding float properties. For this demo we have decided to float them by default. Also your image path will be different.

Depending on your button size you might want to play around with the line height and padding. These should add up to the size of your button. Remember that it is only half of the graphic being used by for the button.

Now we need to add some mouse over movement and some click actions, so that it looks like the button is being depressed. The mouse over is the easy part. I'm sure many are familiar with that. For the click action we swap out the top and bottom image of our combined button graphic. We do this by just changing the position of the background graphic, from top to bottom. We do both the button and the span.

Now I have tested this in both IE7 and Firefox 3. But as you know, no browser ever does things the same way. We always have difficulties. As it so happens IE does not return the button to its normal state whenever it's released. To force such behaviour, we need to add a tiny bit of JavaScript to the < a> tag. No problem just a small in-line javascript.

Hopefully this helps you in some way. Let me know if it was useful to you. Have you used something like this before? Let us know.

Trackback Print

Tags:

Categories:

Location: Blogs The Brave Programmer