Facebook Emotions
This code is from Facebook Chat Emoticons Bar Grease Monkey UserScript
ImagesURL = HttpsOn?'https://s-static.ak.fbcdn.net/images/':'http://static.ak.fbcdn.net/images/';
emotsInfo = [':)', ':(', ':p', ':D', ':o', ';)', '8)', '8|', '>:(', ':/', 开发者_C百科':\'(', '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);
}
This code brings Facebook emotions from Facebook server
I'm coding a WPF , I understand all code procedures except getting the emotion from blank.gif C# Code const string EmotionsResources = "http://static.ak.fbcdn.net/images/";
private Image Emoticons ( string E )
{
return ( new Image ( ) { Source = new BitmapImage ( new Uri ( EmotionsResources + E ) ) } );
}
if you try to get source of any of Facebook chat emotions .. you will get [ http://static.ak.fbcdn.net/images/blank.gif ] this code retrieve emotions from this link HOW ?
I'm guessing here, but I think that the class triggers a style that checks the alt text. (that's the only valid answer once you cross-off all the impossible answers.. the only thing that changes in each iteration is the alt text so that must be what's triggering it. and a css class selector can work on attribute values)
and in other words - you're stuck.
Edit
So i was intrigued so i started to dig a bit deeper:
css style on the image has the following css rules in it:
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;
}
the first one is set by the script, and the second comes from the CSS file.
so. the actual images are found in that png file, which is:
http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png:
(cool to know u can use so many emoticons in fb! :-)
and you'll see ALL of the images in one image (it's done to preserve bandwidth) since the image size is 16*16, it only shows ONE image at a time. the background-position thingie is in charge of shifting the image, so that each time a different icon is shown from the big image.
So to get the image in C# you'll do the following:
you can either crop it, or use the exact same trick (which is better IMO), like this:
<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>
精彩评论