#html #css #wpf #facebook #userscripts
#HTML #css #wpf #Facebook #пользовательские скрипты
Вопрос:
Этот код взят из панели смайликов Facebook в чате, пользовательского скрипта Grease Monkey
ImagesURL = HttpsOn?'https://s-static.ak.fbcdn.net/images/':'http://static.ak.fbcdn.net/images/';
emotsInfo = [':)', ':(', ':p', ':D', ':o', ';)', '8)', '8|', '>:(', ':/', ':'(', '3:)', 'O:)', ':*', '<3', '^_^', '-_-', 'o.O', '>:O', ':v', ':3'];
for(i=0;i<emotsInfo.length;i =1) {
var fEmotsDom = document.createElement('img');
fEmotsDom.setAttribute('alt',emotsInfo[i]);
fEmotsDom.setAttribute('style','cursor: pointer; background-position: -' 16*i 'px 0px;');
fEmotsDom.setAttribute('src',ImagesURL 'blank.gif');
fEmotsDom.setAttribute('class','emote_img');
fEmotsListDom.appendChild(fEmotsDom);
}
Этот код переносит эмоции Facebook с сервера Facebook
Я кодирую WPF, я понимаю все процедуры кода, кроме получения эмоций от blank.gif
C # Код
const string EmotionsResources = "http://static.ak.fbcdn.net/images/";
private Image Emoticons ( string E )
{
return ( new Image ( ) { Source = new BitmapImage ( new Uri ( EmotionsResources E ) ) } );
}
если вы попытаетесь получить источник любой из эмоций Facebook в чате .., вы получите [ http://static.ak.fbcdn.net/images/blank.gif]
как этот код извлекает эмоции из этой ссылки?
Ответ №1:
Я предполагаю здесь, но я думаю, что класс запускает стиль, который проверяет альтернативный текст. (это единственный правильный ответ, если вы вычеркнете все невозможные ответы.. единственное, что меняется на каждой итерации, это текст alt, так что, должно быть, это то, что его запускает. и селектор классов css может работать со значениями атрибутов)
и другими словами — вы застряли.
Редактировать
Итак, я был заинтригован и начал копать немного глубже:
стиль css на изображении соответствует следующим правилам css:
element.style {
background-position: 0px 0px;
}
.emote_img {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png) no-repeat;
overflow: hidden;
}
первый задается скриптом, а второй берется из файла CSS.
итак. фактические изображения находятся в этом png-файле, который:
http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png:
(здорово знать, что ты можешь использовать так много смайликов в fb! 🙂
и вы увидите ВСЕ изображения в одном изображении (это сделано для сохранения пропускной способности), поскольку размер изображения 16 * 16, одновременно отображается только ОДНО изображение. устройство для позиционирования фона отвечает за изменение изображения, так что каждый раз на большом изображении отображается другой значок.
Итак, чтобы получить изображение на C #, вы должны сделать следующее:
вы можете либо обрезать его, либо использовать точно такой же трюк (что лучше IMO), например:
<Canvas ClipToBounds="true" Width="16" Height="16">
<Image Source="http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png"
Canvas.Left="0" /> <!-- or -16, -32, -48 etc.. -->
</Canvas>