SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display image instead of parsed text "next"

    Code:
    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);
    					}
    Code:
    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. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,435
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    Have you tried:
    Code:
    a.innerHTML = '<img src="button.png">';
    I am not saying it will work but its worth a try.

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rubble View Post
    Have you tried:
    Code:
    a.innerHTML = '<img src="button.png">';
    I am not saying it will work but its worth a try.
    Yes that does work.

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

  4. #4
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,435
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    We have both learnt something today

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •