Low bandwidth, flexible mouseover buttons with PNGs
Sunday, October 15, 2006 by SirMeili
Like the look of a graphical button with mouseovers? Want to cut down on bandwidth? I know, perhaps in todays world of high speed internet, low bandwidth solutions aren't priority anymore, but I like to still consider those poor dial up users out there. Trust me, they are still out there too. The benefit of this method just doesn't stop at low bandwidth, it also allows you to be flexible with the button colors. Now, this won't let you do a fancy flash mouseover with an animation, but sometimes all you really want to do it change the color of the button to notify the user that they are on hovering over the button.
Ok, so now I've got you hooked. here's what it looks like:
Button 1Button 2
Here is the HTML for that specific example:
<div class="pngExample">
<span style="padding: 0px;" class="link"></span>
<span class="link" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor = 'black';">Button 1</span>
<span class="link" onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor = 'black';">Button 2</span>
</div>
As you can see the html is simple and you could easily write a JS function to change the background colors. Another neat bonus to this is that you can easily have each button highlight with the same color or each button can have a separate color!<span style="padding: 0px;" class="link"></span>
<span class="link" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor = 'black';">Button 1</span>
<span class="link" onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor = 'black';">Button 2</span>
</div>
It has been brought to my attention that when inserting the above HTML, it is best to put it in a straight line without spaces between the spans or even line returns. On my site I use XML with XSLT transformations, and I don't seem to have that problem though. I think it may have something to do with doctypes, but i don't have the free time right now to run tests.Here is the CSS for that example:
div.pngExample, span.link {
background-color:#000000;
background-image:url(/sites/ftc/graphics/frank_navbarshine2.png);
height:24px;
text-align:center;
padding-left :10px;
padding-right:10px;
color:#FFFFFF;
font-size:14pt;
font-family:Trebuchet MS;
}
div.pngExample {
border:1px solid #000000;
}
span.link {
border-right:1px solid #FFFFFF;
}
/*fix for IE*/
* html div.pngExample, * html span.link {
background-image:url();
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/ftc/graphics/frank_navbarshine2.png',sizingMethod='scale');
}
Here you can see the CSS and how the png comes into play. On browsers that support PNG alpha transparencies, you can just make the PNG your background and it should allow the background color to shine through. The problem comes in when you use IE. For that you have to use the filter AlphaImageLoader. The biggest problem with this is that you have to scale it to have it fill the space. On Compliant browsers you can control the PNG background just like any other by centering it, repeating only in the X or Y axis, etc. In IE you can't do this yet. I hate this and it should be fixed in IE7 in which case it won't matter until it has enough market share to drop the IE6- exception (can't wait for that)background-color:#000000;
background-image:url(/sites/ftc/graphics/frank_navbarshine2.png);
height:24px;
text-align:center;
padding-left :10px;
padding-right:10px;
color:#FFFFFF;
font-size:14pt;
font-family:Trebuchet MS;
}
div.pngExample {
border:1px solid #000000;
}
span.link {
border-right:1px solid #FFFFFF;
}
/*fix for IE*/
* html div.pngExample, * html span.link {
background-image:url();
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sites/ftc/graphics/frank_navbarshine2.png',sizingMethod='scale');
}
I still hope that this sparks some ideas into using pngs to make our sites more streamlined and easier to modify. If you want to see this in action, you can check out my businesss site www.frankthompsonconsulting.com. The menu bar on that site originally had 9 images to accomplish what I have done with 1 or 2 (currently we are experimenting with the look of the site so it may change over time).
Have comments? Please leave them :D
Here's another example (this may not work on IE6 and under as it has the background image png set to fixed and I'm not using the alphaImageLoader):
Button 1
Button 2, but this one is longer and should expand downward
I've found out that the above example does work in IE6 using alphaImageLoader. The secret is this: In the top example I am "scaling" the image vertically and when you do this with IE you have to scale the image in both directions using alphaImageLoader. If the imge height is greater than that of the png's height, it may look odd. However, in the above example I am no trying to scale the image. As a matter of fact the top "shine" isn't repeated at all. So if you use the 'crop' value for the sizing method of alphaImageLoader, then it will work in this instance. I hope this clears up some confusion and that we can see even more full potential of pngs in use in menus and other parts of web dev. I will post more examples as I use them in my projects.-Sir Meili
(0)Comments | < Back
