4

このコードはFacebook チャット 絵文字バーグリース モンキー 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);
    }


このコードは、Facebook サーバーから Facebook の感情をもたらします
。私は WPF をコーディングしています。空白から感情を取得する以外のすべてのコード手順を理解しています。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 ] このコードは、このリンクから感情を取得します。

4

1 に答える 1

4

ここで推測していますが、クラスは代替テキストをチェックするスタイルをトリガーすると思います。（不可能な答えをすべて消すと、これが唯一の有効な答えになります。各反復で変更されるのは代替テキストだけなので、それをトリガーするものでなければなりません。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;
}

1つ目はスクリプトによって設定され、2つ目はCSSファイルから取得されます。

それで。実際の画像は、そのpngファイルにあります。

http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png： フェイスブック絵文字スプライト

（uがfbで非常に多くの絵文字を使用できることを知ってクールです！:-)

画像サイズは16*16であるため、1つの画像にすべての画像が表示されます（帯域幅を維持するために行われます）。一度に表示される画像は1つだけです。背景位置のものが画像のシフトを担当するため、大きな画像とは異なるアイコンが表示されます。

したがって、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>
于 2011-05-19T00:46:02.743 に答える