I am writing a user script for youtube.com, and want to insert a button with the same look and feel as the other buttons on YouTube page. Things were working in the past, but have suddenly stopped working. Have a look at the buttons in this image on top of any youtube video:
So I just noticed one thing in Firebug, these buttons include text and image sub-nodes, but are not rendering the images as simple as giving a source image url to them. The 'src' attribute of these images (the 'plus' sign image, or the 'down arrow' image) or all other such images have exactly the same URL (of a 1 x 1 image) : //s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif. But in the end they are rendered as all these different images. As a result, when I do the same in my buttons, all other CSS properties work fine, but the images are just blank.
- How are they doing this?
- In case a moderator wants to close this question saying it is too specific (about youtube.com), it is not. It is a general question about HTML, but I have seen implemented only by YouTube so far. I am a novice.