Use a picture as a header instead of text

midna

Is it possible to specify an image as the header instead of text?

TomC

CSS only:
#datatable thead th {
text-indent: -999px;
background-image:url(/images/myimage.png);
}

That will move the text out of the box but still be accessible and give your headers an image backgorund. If you want a different image for each header you would have to use the nth-child css selectors.

nirgle

I had a similar requirement to add a help icon to the Actions header to provide a tooltip describing what the icons in that column were for. You can easily append arbitrary text, including your image, if you know your header's text:

[code]
function InjectHelpIcon() {
$('#tblOrders thead tr th:contains("Actions")').append(' '
+ 'View order'
+ 'Add this order to my queue'
+ 'Put this order back in the queue'
+ 'Email this order to someone'
+ '');
}
[/code]

The MouseOverHelpIcon() and MouseOutHelpIcon() functions display/hide the . The css for the div controls the pop-out behaviour.

This creates this effect: http://imgbin.org/images/3261.png