Drupal Tutorial: How to change text-links to image links in the Views pager

How to add jQuery/JavaScript to a Drupal View

First: Add JavaScript to the Views' block header



<script>
$('document').ready(function(){
$('ul.pager li a').html(' &nbsp; &nbsp;');
$('ul.pager li.pager-current').html(' &nbsp; &nbsp;');
});
</script>


Second: Add the CSS below to your CSS file


ul.pager li {
	padding: 0;
}

ul.pager li.pager-current {
	background: url('../images/sprite.png') no-repeat scroll -160px -137px;
	padding: 0;
}

ul.pager li a {
	background: url('../images/sprite.png') no-repeat scroll -148px -137px;
	padding: 0;
}

ul.pager li a:hover {
	background: url('../images/sprite.png') no-repeat scroll -160px -137px;
	padding: 0;
}