MVCContrib pager images

Question

I am able to use the MVCContrib Grid Pager as in the following sample

Html.Pager(Model.CustomerList)
        .First("First")
        .Last("Last")
        .Next("Next")
        .Previous("Previous")

Is there any way to modify the links to show clickable images instead of plain text?

EDIT

I have applied Darin solution and it works very nice except for the image not being showed by the browser. This is the markup generated by the pager helper

<div class="pagination">
    <span class="paginationLeft">1-2 di 4</span>
    <span class="paginationRight">
        <span class="first"></span> | 
        <span class="previous"></span> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="next"></span>
        </a> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="last"></span>
        </a>
    </span>
</div>

and these are the CSS rules defined

.pagination span.paginationRight span.first { width: 12px; height: 12px; background-image: url('../images/disabled-pager-first.png') }
.pagination span.paginationRight span.next { width: 12px; height: 12px; background-image: url('../images/disabled-pager-next.png') }
.pagination span.paginationRight span.last { width: 12px; height: 12px; background-image: url('../images/disabled-pager-last.png') }
.pagination span.paginationRight span.previous { width: 12px; height: 12px; background-image: url('../images/disabled-pager-previous.png') }

.pagination span.paginationRight a span.first { width: 12px; height: 12px; background-image: url('../images/pager-first.png') }
.pagination span.paginationRight a span.next { width: 12px; height: 12px; background-image: url('../images/pager-next.png') }
.pagination span.paginationRight a span.last { width: 12px; height: 12px; background-image: url('../images/pager-last.png') }
.pagination span.paginationRight a span.previous { width: 12px; height: 12px; background-image: url('../images/pager-previous.png') }

As you can see from the following images the correct CSS rules match the markup generated. Still I can't see images on the browser. Any idea?

For disabled images

For enabled images

Answer 1

Of course:

<%= Html.Pager(Model.CustomerList)
        .First("<img src=\"http://example.com/first.png\" alt=\"first\" />")
        .Last("<img src=\"http://example.com/last.png\" alt=\"last\" />")
        .Next("<img src=\"http://example.com/next.png\" alt=\"next\" />")
        .Previous("<img src=\"http://example.com/previous.png\" alt=\"previous\" />")
%>

or if you prefer to use CSS:

<%= Html.Pager(Model.CustomerList)
        .First("<span class=\"first\" />")
        .Last("<span class=\"last\" />")
        .Next("<span class=\"next\" />")
        .Previous("<span class=\"previous\" />")
%>

and then in a separate CSS file define the background images.

---

UPDATE:

For background images to be applied your span elements need to have some content. So try adding a space:

<div class="pagination">
    <span class="paginationLeft">1-2 di 4</span>
    <span class="paginationRight">
        <span class="first">&nbsp;</span> | 
        <span class="previous">&nbsp;</span> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="next">&nbsp;</span>
        </a> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="last">&nbsp;</span>
        </a>
    </span>
</div>

Answer 2

Try rolling your own. I've implemented a custom Grid and Pager that takes advantage of jQuery UI themes - it may help you roll your own or you could use the implementation. Blog is here with links to a demo and source.