Question

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|', '>:(', ':/', ':\'(', '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 ?

Answer 1

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>