Display image instead of parsed text "next"

JavaScript
1 

if(this.cfg.paging == true){
					this.cfg.display_first = false;
					var pul = document.createElement('ul');
					pul.setAttribute('id', 'ytPage');
					if(json.data.totalItems > (json.data.startIndex + json.data.itemsPerPage)){
						var li = document.createElement('li');
						
						var a = document.createElement('a');
						a.className = 'ytNext';
						a.style.cursor = 'pointer';
						
						li.appendChild(a);
						if(a.addEventListener){
							a.addEventListener('click', ytEmbed.loadNext.bind(this, {cfg: cfg} ),false);
						}else if(a.attachEvent){
							a.attachEvent('onclick', ytEmbed.loadNext.bind(this, {cfg: cfg}));
						}						
						a.innerHTML = 'Next';
						li.appendChild(a);//do through bind
						pul.appendChild(li);
					}



a.innerHTML = 'Next';

This displays a clickable link “Next”

How do I change that to an image of my choice? Say a nice “>” button.png with a certain height width etc.

2

Have you tried:

a.innerHTML = '<img src="button.png">';

I am not saying it will work but its worth a try.

3

Yes that does work. :slight_smile:

Now finding out how I can change that image on mousover state.

4

We have both learnt something today :slight_smile:

I know very little about javascript and I do not know if a javascript method would work with the a.innerHTML I would try doing I with a css class.

You have both states of the image in one image and only one state shows, when you hover over the first image it goes out of view and the second image pops in.
I would search for css image rollover or css swap images. It is not hard to do but I have not done it for a few years and it would probably be easier finding a tutorial than me explaining it.