Как этот сайт отображает изображения?

Question

Я пишу сценарий пользователя для youtube.com и хочу вставить кнопку, которая выглядит так же, как другие кнопки на странице YouTube. В прошлом все работало, но внезапно перестало работать. Посмотрите на кнопки на этом изображении в верхней части любого видео на YouTube:

Итак, я только что заметил одну вещь в Firebug, эти кнопки включают в себя подузлы текста и изображения, но они не отображают изображения так просто, как их исходный URL-адрес. Атрибут 'src' этих изображений (изображение знака «плюс» или изображение «стрелка вниз») или всех других таких изображений имеют точно такой же URL-адрес (из изображения 1 x 1): // s. ytimg.com/yt/img/pixel-vfl3z5WfW.gif. Но в конце они представлены как все эти разные образы. В результате, когда я делаю то же самое с моими кнопками, все остальные свойства CSS работают нормально, но изображения просто пустые.

Я просто хочу узнать об этом у экспертов html / javascript / css -

1. Как они это делают?
2. Как получить эти окончательно визуализированные изображения с помощью CSS / javascript?

Спасибо!

P.S. :
-В случае, если модератор захочет закрыть этот вопрос, сказав, что это не вопрос программирования, это так. Чтобы узнать, как можно добиться такого типа «необнаружимого» HTML-изображения или как пользовательский скрипт все еще может получить это изображение через javascript / html / css.
- Если модератор захочет закрыть этот вопрос, сказав, что он слишком конкретен (о youtube.com), это не так. Это общий вопрос о HTML, но до сих пор я видел его реализованным только на YouTube. Я новичок.

Спасибо,
Piyush

Answer 1

Эта техника называется CSS-спрайтами.Он используется для уменьшения количества HTTP-запросов.

По сути, у вас есть только одно изображение со всеми вашими иконками (таким образом, вам нужно только загрузить одно изображение с сервера).Вы должны использовать это изображение в качестве фонового изображения для вашего элемента, ширина / высота которого определяется размером значка для отображения, и играть со свойствами css background-position, чтобы поместить фон в верхнем / левом углу значка для отображения.на фоновом изображении.

Таким образом, важными частями являются:

• установить изображение в качестве фона
• установить размер для вашего элемента.Поскольку изображение используется в качестве фона, оно не будет иметь неявного размера из изображения!
• установить правило положения фона

YouTube использует следующее изображение: http://s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png

Изображение имеет размер 16px / 16px, а верхний / левый значок «плюс» находится в позиции 97px / 66px, поэтому они используют следующие значения положения фона:

background-image: url(//s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png);
background-position-x: -97px;
background-position-y: -66px;
width: 16px;
height: 16px;

Дополнительная литература:

• CSS Sprites: Поцелуй Смерти с изображением
• Тайна CSS-спрайтов

Генераторы:

• Онлайн генератор спрайтов CSS

Answer 2

Эта техника называется "CSS-спрайты":

• http://css -tricks.com / CSS-спрайты /
• http://www.alistapart.com/articles/sprites
• http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
• https://stackoverflow.com/search?q=css+sprites

Они используют одно изображение со всеми фонами , и используют CSS, чтобы установить высоту и ширину элемента и расположить фон таким образом, чтобы была показана только его часть.

В случае с YouTube они, похоже, используют пробел 1x1 <img> и устанавливают фоновое изображение для самого тега img.

Answer 3

Я пишу сценарий пользователя для youtube.com и хочу вставить кнопку, которая выглядит так же, как другие кнопки на странице YouTube.

Просто присвойте своей кнопке класс yt-uix-button yt-uix-button-default, и она будет выглядеть так же, как и другие кнопки. Я делаю то же самое в своем собственном пользовательском скрипте YouTube.

В прошлом все работало, но внезапно перестало работать.

Да, они немного изменили имена классов во время последнего большого обновления.

Ранее класс был просто yt-uix-button, как вы указали в своем комментарии, теперь вы также должны добавить yt-uix-button-default.

---

Вот моя пользовательская кнопка, просто чтобы показать, как она работает;)

Answer 4

Посмотрите объявление CSS для этого тега. Например, кнопка «Мне нравится» имеет следующий html:

<button onclick=";return false;" title="I like this" type="button" class="start yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip" id="watch-like" data-button-toggle="true" data-button-action="yt.www.watch.actions.like" role="button" data-tooltip-text="I like this">
    <img class="yt-uix-button-icon yt-uix-button-icon-watch-like" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="I like this"><span class="yt-uix-button-content">Like </span>
</button>

А в CSS есть объявление:

#watch-actions .yt-uix-button-icon-watch-like {
    background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png) -75px -102px;
    width: 13px;
    height: 15px;
}

www-refresh-vflmpZ5kj.png - это спрайт, а объявление фона размещает его на уровне -75px и -102px, что соответствует значку большого пальца вверх.