Using images for previous and next in Pagination

Question

This is the pagination plugin. I need a bit of help. I am trying to use an image for the prev and next buttons. I keep having issues with it. Has anyone any idea how I could go about doing this? Currently if I use an image it will display the prev/next button as [object HTMLImageElement]. Thanks in advance!

var methods = {
    init: function(options) {
        var o = $.extend({
            items: 1,
            itemsOnPage: 1,
            pages: 0,
            displayedPages:5,
            edges: 2,
            currentPage: 1,
            hrefTextPrefix: '#page-',
            hrefTextSuffix: '',
            prevText: 'prev', //this is the prev button text. I want to replace this with imgLeft 
            nextText: 'next', //this is the next button text. I want to replace this with imgRight 
            ellipseText: '…',
            cssStyle: 'light-theme',
            labelMap: [],
            selectOnClick: true,
            onPageClick: function(pageNumber, event) {
                // Callback triggered when a page is clicked
                // Page number is given as an optional parameter
            },
            onInit: function() {
                // Callback triggered immediately after initialization
            }
        }, options || {});


       methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'});


       methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'});

Answer 1

As it's been said, you can just use CSS to theme the ".prev" and ".next" classes. Then, depending on what you want to do, you just have to add a background image to that element, change the color of the text, etc.

.prev, .next {
  color: #FF0000;
  font-family: Arial, sans-serif;
  display: inline-block;
}
.prev {
  width: 50px;
  height: 30px;
  background: url('/my/image.jpeg') no-repeat center;
}
...