I must admit that my motivation for the following implementation was purely out of laziness. MonoRail didn't have a convenient way to generate an image wrapped in an anchor and rather than add a new method to HtmlHelper, testing, and submitting a patch, I wussed out and went another direction. So, I have a standard set of png images to use as icons. Each is 24x24 pixels. Naturally when the icon is clicked I want to send the user to another page or possibly submit a form. Let's start with the end and then get to the means. Here is the resulting HTML.
<a href='/main/search.rails' class='icon search' title='Search'>Search</a>
Pretty straightforward. Here is the CSS that turns that into a nice graphical link:
a.icon
{
text-indent: -999em;
width: 24px;
height: 24px;
position: relative;
display: block;
float: left;
}
a.search
{
background: url('searchIcon.png') top left no-repeat;
}
a.print
{
background: url('printIcon.png') top left no-repeat;
}
/*
...
*/
The reason I like this approach is that I can guarantee consistent use of the same icons throughout the app. I can also easily customize the icons for different customers.
posted @ Thursday, November 15, 2007 8:13 AM