Оригинальный способ хранения изображений флагов

    Поставил сегодня я новую бета версию Skype и заодно решил посмотреть старым добрым Restorator'ом какие ресурсы (картинки в частности) содержит 25 мегабайтный файл. И наткнулся на очень интересный способ хранения флагов стран:


    Upd: Рисунок оригинальный, ничего не менял, только прозрачные области белым цветом залил.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 197

      –33
      а где ru?
        0
        Найдите? :)
          +5
          Найдите! :)
        • UFO just landed and posted this here
            +3
            Правильно, просто люди по наитию сначала смотрят строку, а потом столбец.
            Это в программёрстве всё наоборот. И считаем мы с нуля :)
              +2
              Незнаю как у вас, но у нас в программировании сначала тоже смотрят строку, а потом столбец. А вот счет с нуля — это да.
                +2
                Аналогично. Создаётся ощущение, что авторы скайпа матрицы не проходили.
                  0
                  а вы транспонируйте — и смотрите
              +1
              ОМГ! Кто бы мог подумать! =)
            • UFO just landed and posted this here
              • UFO just landed and posted this here
              –8
              Многовато лишних белых пикселов хранится…
                +1
                Нет там не белые пискселы… там прозрачные… это я их покрасил, т.к. при заливке рисунка хостеру он их в черный цвет перекрашивал.
                  +7
                  Прозрачные пиксели места не занимают! :)
                  0
                  Собственно, для единственного файла с флагами, с адекватным алгоритмом сжатия — и для быстрого парсинга — решение очень удачное. Например, если использовать lzw сжатие, строка прозрачных пикселов шириной в ширину одного флага, будет храниться как 1 символ (13-17 бит)
                    –10
                    И в результате 20 мб. Для быстрого парсинга? ну-ну
                      +6
                      20 мегов — это весь дистриб скайпы, а не одна картинка с флажками, если чо :)
                        0
                        Во первых, неясно назначение букв (ясна причина их появления, но не назначение)
                        Во вторых, приходится загружать в память эти 80-90кб.
                        Да, в некоторых случаях такой способ оправдан, но в случае скайпа… это сделано, потому что так удобнее дизайнеру, и совсем не программисту.
                          0
                          Хотя… кажется скайп отображает флаги стран рядом с номерами на страницах браузеров… тогда да, скорее всего такой метод оправдан…
                            0
                            Прошу прощения, но найдя флаг РФ по буквам RU и имея опыт разработки подсистем локализаций, я имею наглость подтверждать свои слова об удобстве парсинга из такого файла)
                            Взять хотя бы способы реализации вывода шрифтов под OpenGL. Самыми быстрыми являются текстурные шрифты, где нужные символы различных кодировок расположены в таком же файлике на своих местах. Так реализуются не только моноширинные, если что))
                              0
                              Да реализовывал я шрифты в OpenGL, даже утилиту писал, которая генерировала такие тектуры на лету, без файликов.

                              Собственно мой первый коммент был наличием в вашем слова парсинг.
                              Что вы парсить из этой картинки собираетесь? Текстовые названия стран?
                                +1
                                Ох, прошу прощения, использовал термин не подумал. Я имел в виду «вытаскивать»…
                                  0
                                  Два месяца назад я тоже реализовывал текстурные шрифты на OpenGL, по тестам они рисовались в 5 раз быстрее шрифтов из glut. За 5 минут написал программку на шарпе, которая располага символы в нужном положении, сохраняла канву, затем другой программкой (тоже писал сам, но уже как внутриигровую утилиту на движке создаваемой игры) конвертировал картинку во внутриигровой формат с информацией по каждому символу внутри.
                                  Отсюда вопрос, если Вы генерили текстуры, Вы делали шрифты моноширинными?
                                    0
                                    Нет, пользовался информацией о ширине, рисовал полоской вырожденных треугольников, да… давно это было. Сейчас уже нормальные библиотеки есть для таких целей… 5-ю способами умеют.

                                    А почему вы спрашиваете?
                                      0
                                      Исключительно любопытство, отошел от компьютера, вспомнил Ваш пост, задумался… :)
                        +1
                        не в голом же bmp эта картикна хранится ..)
                          0
                          в памяти она хранится именно в виде голого битмапа. по моим подсчётам это будет отжирать несколько метров оперативки.
                            +1
                            Пересчитай ещё раз.
                              0
                              ну, если это в натуральную величину, то пол метра.
                        +1
                        может быть всетаки «способ хранениЯ» ?))
                          +1
                          Исправил, спасибо!
                            +1
                            исправили, да не везде ;) «И наткнулся на очень интересный способ хранение флагов стран:»
                          +1
                          Весьма интересная идея =)
                            +23
                            Этот способ по русски надо назвать — «МОРСКОЙ БОЙ»!!!
                              0
                              Точно!=)
                                +1
                                *3-е мировой бой.
                                  –3
                                  а ещё на тетрис похоже
                                    +2
                                    G E — ранен =)
                                • UFO just landed and posted this here
                                    +1
                                    Я оригинал рисунка представил.
                                    –2
                                    а буквы вы сами дорисовали? а то как-то избыточно еще и буквы в картинке хранить…
                                      0
                                      Я думаю буквы — это тоже информация, возможно они из этих букв составляют полное изображение индекса страны.
                                        +2
                                        бквы скорее всего для удобства довбавления новых флажков в пейнте :)
                                        +8
                                        Хм, интересно. И главное должно быть оптимально.
                                        Только вот боюсь автор топика нарушил лицензию и теперь на него начнутся гонения
                                          0
                                          А где Англия?
                                            0
                                            GB
                                              +1
                                              _ U _
                                              |
                                              K
                                              |
                                                0
                                                Не, я имею в виду белый флаг с красным крестом.
                                                  +3
                                                  Тогда бы пришлось добавить и флаги Уэльса, Шотландии и Северной Ирландии, как участников того же королевства. Кроме того, у этих стран нет двухбуквенного кода ISO 3166-1 по той же причине.
                                              +51
                                              К вопросу об русификации.

                                              Русификация

                                              Простите, не удержался.
                                                +12
                                                Там должны быть красные флаги с серпом и молотом :D
                                                  +32
                                                  Так лучше? )

                                                    0
                                                    Великолепно!
                                                      +6
                                                      И моя карма плавно опускается до нуля )
                                                        +3
                                                        Моя тоже, минусующий мог бы хотя бы отписаться о причине минуса для приличия =)
                                                          0
                                                          Повысил вам обоим =)
                                                            0
                                                            Благодарствуем )
                                                              0
                                                              Спасибо добрый человек =)
                                                      • UFO just landed and posted this here
                                                          +5
                                                          у вас есть телефон, позволяющий звонить в прошлое?
                                                            0
                                                            а вы ему письмо напишите! (ц) Почтальон Печкин. В домен su.
                                                    • UFO just landed and posted this here
                                                        0
                                                        Видимо о русификации и того и другого
                                                          0
                                                          Русификация — программе, а население это национализация.
                                                        +33
                                                        Судя по картинке imhost.ru защитил 10 стран от наступления )
                                                          +3
                                                          Советую picamatic.com, он не оставляет уродских ватермарков на картинках, и у него очень удобный AJAX-интерфейс, вам понравится!
                                                            +1
                                                            Но периодически тормозит страшно.
                                                              0
                                                              Пикматик однако не спасет те 10 стран от всеобщей национализации! :)
                                                            +5
                                                            Класс! Обожаю такие решения! На мой взгляд — гениально!
                                                              –13
                                                              И чо в этом гениального? Я вот не вижу ни одного плюса такого решения. А минусы очевидные, что нужно реализовывать алгоритм вырезания нужного флага.
                                                                +6
                                                                «Да ты не рыбак!»
                                                                  +4
                                                                  Алгоритм реализован в каждом браузере, Гугль так же поступает с большим количеством картинок.

                                                                  В нужном месте задаётся блок заданного размера, потом в него подставляется бэкграунд со смещением. Смещение в данном случае вычисляется за две арифметических операции.
                                                                    +1
                                                                    На главной Google, давно это заметил…

                                                                    +2
                                                                    Битблиттинг — базовая функция в графике, он при любом способе хранения картинок будет использоваться.
                                                                      –3
                                                                      + кастыль к IE6
                                                                  • UFO just landed and posted this here
                                                                      +2
                                                                      Интересная привычка — ковырять новую программу на наличие ресурсов %)
                                                                      Или это вы только со скайпом так поступаете )?
                                                                        +2
                                                                        Нет я обычно ковыряюсь только если понравилось какое-то цветовое решение, и нужно взять оригинальный цвет, а такие вещи как правило лежат в виде рисунков в ресурсах.
                                                                          +3
                                                                          Цвет проще выхватить пипеткой прямо с окна программы, имхо.
                                                                        +7
                                                                        Не кажется ли вам, что было бы интуитивней транспонировать таблицу? Я вот начал искать россию на пересечении R строки и U столбца. Я один такой?
                                                                          0
                                                                          Нет, я тоже. Математическое прошлое даёт о себе знать )
                                                                            0
                                                                            Так вроде координата по «х» и в математике первая…
                                                                              +6
                                                                              В матрицах, как правило, первыми индексируются строки, вторыми — столбцы.
                                                                              На картинке — матрица.
                                                                                +1
                                                                                Ах, ну, да, приминительно к матрицам это так =)
                                                                                Меня это, кстати, почему-то всегда напрягало, хотя обозначение вектора как столбца было приятнее, чем как строки.
                                                                                  0
                                                                                  У меня первая мысль была — таблица :) Видимо не математик
                                                                                0
                                                                                тоже математическое прошлое, но меня всегда бесила эта путаница :) (матрицы и координаты)
                                                                                –1
                                                                                Ну да. Любому человеку свойственно найти нужную строку, а в ней — нужный столбец.

                                                                                Однозначно, создатели скайпа — не люди. Инопланетянцы, разве что?
                                                                                  +6
                                                                                  А в графике используется пара координат (x,y). Все нормально.
                                                                                  На PHP вытягивание флажка выглядит где-то так:
                                                                                  imagecopy($dst,$table,0,0,ord($code[0])-ord('A'),($code[1])-ord('A'),16,8);
                                                                                    0
                                                                                    строка обозначается Y координатой.
                                                                                    0
                                                                                    Исходя из рисунка, получается, что большинство стран называются на гласные буква A, еще пик названий приходится на начало(1-ая буква) длится 4 буквы, потом на вторую половину(12-13-ая буквы), и на вторую половину второй половины (19-20-ая буквы, длится 2 буквы). Так же между пиками(посередине-1) лежит по одной букве(G,P), которые также часто). Что-то я переморочился.., пятница, пора отдыхать…
                                                                                      0
                                                                                      ой, + куда-то пропал. «на гласные+буква А»
                                                                                      0
                                                                                      Хм, на флаге какой страны изображена буква S?
                                                                                        +1
                                                                                        Skypeland
                                                                                          +2
                                                                                          Хе-хе, самое интеренсое что оно на пересечении буквы S и S.
                                                                                          0
                                                                                          ss — Swati — SiSwati
                                                                                          Из Википедии.
                                                                                            0
                                                                                            Swati и SiSwati это язык.
                                                                                            Есть народность Swazi в южной африке входящая в состав Swaziland.
                                                                                            Есть страна Swaziland в которой на этом языке разговаривают, но флаг у неё совсем другой

                                                                                            p.s. Вики была проверена на эту тему первой =)
                                                                                          0
                                                                                          У Австрии (Austria) и Австралии (Australia) первые две буквы совпадают. Флаг Австралии на картинке есть, а как же быть с Австрией?
                                                                                            +1
                                                                                            У австрии .at, у Австралии .au
                                                                                              0
                                                                                              Австралия – AU, австрия – AT
                                                                                                0
                                                                                                Страны шифруются не первыми двумя буквами, а доменными кодами.
                                                                                                В случае Австрии — AT.
                                                                                                  +4
                                                                                                  Если быть еще более точным, то шифруются в соответствии с ISO 3166-1-alpha-2, в соответствии с которым уже были созданны «доменные коды».
                                                                                                    0
                                                                                                    наоборот :) доменные коды — по кодам стран :)
                                                                                                      0
                                                                                                      Естественно. Я имел в виду не страны вообще, а страны на этой картинке.
                                                                                                  +2
                                                                                                  Насколько я помню, координатный метод хранения мелких ихображений в одном большом паке (aka файле) применяется давно. Способ конечно хорош, но все новое — это давно и хорошо забытое старое. Аналогичный способ хранения линейной картинки с типами файлов юзается в статье про стилизованные файл-инпуты. В общем, идея хороша, но не нова и применяется весьма успешно.

                                                                                                  Да что там далеко ходить — неужели никто не помнит процесс сжатия шрифтов в Играх? Та же картинка с координатным методом выборки необходимого символа. Основной вопрос — в построении координат. Но это уже к Скайпу.
                                                                                                    0
                                                                                                    На X нет ни одной страны?
                                                                                                      0
                                                                                                      неа, ещё на O и Q только по одной стране.
                                                                                                    • UFO just landed and posted this here
                                                                                                      • UFO just landed and posted this here
                                                                                                          +2
                                                                                                          это кто ж пишет «Rumania», интересно знать ))
                                                                                                          • UFO just landed and posted this here
                                                                                                              0
                                                                                                              устаревший словарь значит… раньше действительно так писали.
                                                                                                            0
                                                                                                            На двухбуквенные сокращения стран вроде международный стандарт есть или что-то в этом роде.
                                                                                                            • UFO just landed and posted this here
                                                                                                              • UFO just landed and posted this here
                                                                                                                • UFO just landed and posted this here
                                                                                                              0
                                                                                                              Даже Антарктида присутствует, политкорректно однако…
                                                                                                                0
                                                                                                                А как же SU?
                                                                                                                  +2
                                                                                                                  Раскрыта попытка заговора!

                                                                                                                  Skype собирается основать собственное государство с кодом SS (неонацизм?)
                                                                                                                    0
                                                                                                                    Skypeland? :)
                                                                                                                      –1
                                                                                                                      Где в skypeland вторая s?
                                                                                                                        +4
                                                                                                                        Skypestan :)
                                                                                                                      –3
                                                                                                                      Кому-то было очень нечего делать…
                                                                                                                        +4
                                                                                                                        Да людям вообще нечего делать. Вместо того, чтобы картошку сажать, они программы пишут. А потом вот кризис. Ужас.
                                                                                                                          0
                                                                                                                          Я вообще считаю, что зря с деревьев слезли. Пробовал обратно, но сотни миллионов лет эволюции сделали своё чёрное дело…

                                                                                                                          Как я могу судить по всеобщему восхищению — этот способ хранения флагов достаточно нетривиален. Нетривиальность означает, что программисты сами на себя призывают дополнительный геморрой, зато потом с этого имеют дополнительный профит. Сколько там им было геморроя я не знаю, но вот кол-во профита, мне кажется, равно нулю. Что они выиграли-то? Сэкономили пару килобайт на диске? Пару десятков килобайт в памяти? Одну стодвадцатьвосьмую пиконаносекунды на времени обработки?
                                                                                                                            0
                                                                                                                            Хм, допустим на веб странице 30 флагов отображается, на каждый файл по 2 запроса возьмем для примера — 60 запросов. Это не так мало, время загрузки у пользователя будет заметно меньше при одном файле.
                                                                                                                              0
                                                                                                                              Какая веб-страница, речь идёт о гуишной программе.
                                                                                                                                0
                                                                                                                                Ну тогда — меньше фрагментация)
                                                                                                                                  0
                                                                                                                                  Так ведь и то не факт — даже если хранить по одному флажку, они же не лежат на диске в виде ru.bmp, us.bmp и т. д., а запихнуты все вместе в один файл ресурсов :)
                                                                                                                        +1
                                                                                                                        Обычно иконки в гуевых программах хранятся именнов таком виде. И сам я применяю такой же метод, если на сайте есть куча иконок одинакового формата.
                                                                                                                          +9
                                                                                                                          Понт не в спрайте, а в координатах.
                                                                                                                          –1
                                                                                                                          Мне кажется, или там две Австралии (au и cx)?
                                                                                                                            +1
                                                                                                                            CX — en.wikipedia.org/wiki/Christmas_Island
                                                                                                                            Правда флаг другой
                                                                                                                              0
                                                                                                                              Рождественский остров! Звучит!
                                                                                                                                0
                                                                                                                                остров Рождества на самом деле :)
                                                                                                                            0
                                                                                                                            А что такое UM?
                                                                                                                            Тут en.wikipedia.org/wiki/Country_code_top-level_domain нет ничего о «нём»
                                                                                                                              +1
                                                                                                                              United States Minor Islands что бы это ни было.
                                                                                                                                +3
                                                                                                                                Чтоб они были здоровы
                                                                                                                                +2
                                                                                                                                UMerika
                                                                                                                                  +1
                                                                                                                                  Доменные имена — лишь частный случай применения.
                                                                                                                                  ru.wikipedia.org/wiki/ISO_3166-1
                                                                                                                                  • UFO just landed and posted this here
                                                                                                                                      0
                                                                                                                                      в русской вики старая инфа, домена .um нет на root-ах уже (убрали в январе 2007-го).
                                                                                                                                        0
                                                                                                                                        В английской Wikipedia то же самое, в статье не список доменов.
                                                                                                                                    0
                                                                                                                                    А буквочки тоже в исходном файле были? Это специально для удобства «ковыряния»? (Вряд ли при вытаскивании нужного флага программа ищет буквы.)
                                                                                                                                      +1
                                                                                                                                      класс, кто преобразует в координаты для css спрайтов?
                                                                                                                                        –6
                                                                                                                                        Скайп всегда отличался своей кривизной. Удобно лишь для каких-нибудь дизайнеров, и все +) С точки зрения программинга — во всех смыслах неудачно.

                                                                                                                                        А еще не знают, что для пнгшек есть pngout…
                                                                                                                                          +2
                                                                                                                                          вообще, скайп довольно сложно оценивать с точки зрения программинга… (см.)

                                                                                                                                          Чем Вы обоснуете своё утверждение о неудачности скайпа с точки зрения программинга?
                                                                                                                                            –6
                                                                                                                                            Скайп обладает богомерзким интерфейсом, чем собсно и отталкивает. Ну не могут нормально писаные проги обладать таким интерфейсом.

                                                                                                                                            Возвращаясь к портянке флагов — места на диске жрет больше, в памяти жрет больше, вычисление координат работает не шибко быстро. Если я упускаю преимущества — велком.

                                                                                                                                            А еще ковырях j2me клиент — кокашычка +)
                                                                                                                                              +2
                                                                                                                                              Богомерзкий интерфейс — дело субъективное. и вообще: внешность и программная реализация — всё таки разные вещи. Не стоит их смешивать.

                                                                                                                                              Про одну картинку в компиленой программе не могу сказать. Может и места занимает меньше (за счёт общего заголовка и сжатия). Может один объект удобнее хранить. Не знаю, не видел внутренностей.

                                                                                                                                              В web css-спрайты довольно приятная штука и много чего может сэкономить (особенно когда картинок такая туча).
                                                                                                                                            +5
                                                                                                                                            А если вам нужно показать 100 флажков рядом — нужно открыть 100 файлов. Вы уверены что с точки зрения программинга и потребления ресурсов это решение неудачное?
                                                                                                                                              0
                                                                                                                                              таки я нигде не написал, что надо именно 100 файлов.
                                                                                                                                            –3
                                                                                                                                            Красиво, но не юзабельно.
                                                                                                                                              +4
                                                                                                                                              Кстати, очень, между прочим удобно с точки зрения организации данных :)

                                                                                                                                              Универсальная штука.

                                                                                                                                              Вы знаете, что большинство интерфейсных JS фреймворков использует подобное. То есть рисуется некоторое изображение с изображением например иконок, и потом используется всего лишь один ресурс/изображение, а не грузится каждый раз новое. С точки зрения организации данных и процессов/выделения памяти на процесс этот вариант достаточно удобен. То есть программистами всего лишь должна быть доработана система выделения части изображения из исходного.

                                                                                                                                              Кто вам говорит, что картинки вырезаются?

                                                                                                                                              Image Mapping

                                                                                                                                              Короче говоря, я к тому что не следует делать поспешных выводов.
                                                                                                                                              По мне так skype, как ПО выполнен очень грамотно и явно делается разумными программистами.
                                                                                                                                                0
                                                                                                                                                обоснуйте минус, я бы хоть поспорил за свою точку зрения!
                                                                                                                                                +2
                                                                                                                                                Заглянул и я в ресурсы скайпа с вашей подачи. Порадовали language-neutral битмапки :)
                                                                                                                                                Видимо при создании проекта Delphi их автоматически добавил в ресурсы, а убрать забыли :)
                                                                                                                                                  0
                                                                                                                                                  Прикольно — думал, что Win версия Skype разработана на C++, т.к. Linux версия на C++ с Qt, а для Maс OS X на Objective-C с Cocoa, а оказалось — на Delphi.
                                                                                                                                                    0
                                                                                                                                                    А может, просто на Builder'е?
                                                                                                                                                      +1
                                                                                                                                                      Получается, что нет — именно на Delphi. Интересно!
                                                                                                                                                      0
                                                                                                                                                      а разве не на c++ qt на всех платформах?
                                                                                                                                                        0
                                                                                                                                                        выходит, что нет
                                                                                                                                                    –6
                                                                                                                                                    Скажу как «самизнаетекто» — охуенно!
                                                                                                                                                      –2
                                                                                                                                                      класс, теперь все флаги на странице будут загружаться одновременно.
                                                                                                                                                        +4
                                                                                                                                                        Вот вариант использования данной картинки для веба. Автор не зарегистрирован на хабре, попросил меня выложить.

                                                                                                                                                        pliper.ru/flags/flags.html
                                                                                                                                                          0
                                                                                                                                                          Опять забыли про EO, клопоеды… :-(
                                                                                                                                                            0
                                                                                                                                                            что такое EO, позвольте узнать? :)
                                                                                                                                                              0
                                                                                                                                                              Двухбуквенное сокращениеэсперанто или Эсперантиды.
                                                                                                                                                                0
                                                                                                                                                                тут вообще-то флаги *стран*, а не языков.
                                                                                                                                                                  0
                                                                                                                                                                  Эсперантида — это страна =)
                                                                                                                                                                    0
                                                                                                                                                                    Я конечно чувствую себя необразованным холопом, НО — где же эта страна находится?
                                                                                                                                                                    Читал в вика чёрным по русски — Эсперанти́да — неформальное название для сообщества людей, говорящих на эсперанто, и их культуры.
                                                                                                                                                                      0
                                                                                                                                                                      Пардон, дал ссылку на статью-эмбрион.

                                                                                                                                                                      На эсперанто «Эсперантида» — Esperanto-lando, Esperantujo или Esperantio — это слова, образованные с суффиксом, при помощи которого образуются названия стран.

                                                                                                                                                                      Эсперантида — воображаемая страна, географически охватывающая весь мир, жители которой — все говорящие на международном языке (это несколько миллионов человек).

                                                                                                                                                                      Жители страны довольно активны. Нет дня в году, когда бы где-то в мире не проходило эсперанто-мероприятие — конгресс, тематическая или региональная встреча.

                                                                                                                                                                      А находится она в сердце =)
                                                                                                                                                          • UFO just landed and posted this here
                                                                                                                                                              0
                                                                                                                                                              Я вот понять не могу, а UM это флаг какой страны?
                                                                                                                                                              • UFO just landed and posted this here
                                                                                                                                                                0
                                                                                                                                                                Почитайте Крис Касперски, «Skype – скрытая угроза», будет не смешно. Т.е. я догадывался, что она использует чужие реальники как промежуточные сервера, но и не подозревал насколько это подозрительная, хитрая и запутанная система.
                                                                                                                                                                  +2
                                                                                                                                                                  Почитайте лучше Vanilla Skype (часть 1, часть 2). А Касперски вообще мастер делать из мухи слона и видеть вещи там, где их нет :)

                                                                                                                                                                  А то, что Skype может гнать через вас траффик написано в EULA, да кто ж его читает?
                                                                                                                                                                  0
                                                                                                                                                                  а вот только я не понял, а что это за флаг по SS?
                                                                                                                                                                  • UFO just landed and posted this here
                                                                                                                                                                  –5
                                                                                                                                                                  .ad{background-position:-16px -44px;}
                                                                                                                                                                  .ae{background-position:-16px -55px;}
                                                                                                                                                                  .af{background-position:-16px -66px;}
                                                                                                                                                                  .ag{background-position:-16px -77px;}
                                                                                                                                                                  .ai{background-position:-16px -99px;}
                                                                                                                                                                  .al{background-position:-16px -132px;}
                                                                                                                                                                  .am{background-position:-16px -143px;}
                                                                                                                                                                  .an{background-position:-16px -154px;}
                                                                                                                                                                  .ao{background-position:-16px -165px;}
                                                                                                                                                                  .aq{background-position:-16px -187px;}
                                                                                                                                                                  .ar{background-position:-16px -198px;}
                                                                                                                                                                  .as{background-position:-16px -209px;}
                                                                                                                                                                  .at{background-position:-16px -220px;}
                                                                                                                                                                  .au{background-position:-16px -231px;}
                                                                                                                                                                  .aw{background-position:-16px -253px;}
                                                                                                                                                                  .ax{background-position:-16px -264px;}
                                                                                                                                                                  .az{background-position:-16px -286px;}
                                                                                                                                                                  .ba{background-position:-32px -11px;}
                                                                                                                                                                  .bb{background-position:-32px -22px;}
                                                                                                                                                                  .bd{background-position:-32px -44px;}
                                                                                                                                                                  .be{background-position:-32px -55px;}
                                                                                                                                                                  .bf{background-position:-32px -66px;}
                                                                                                                                                                  .bg{background-position:-32px -77px;}
                                                                                                                                                                  .bh{background-position:-32px -88px;}
                                                                                                                                                                  .bi{background-position:-32px -99px;}
                                                                                                                                                                  .bj{background-position:-32px -110px;}
                                                                                                                                                                  .bl{background-position:-32px -132px;}
                                                                                                                                                                  .bm{background-position:-32px -143px;}
                                                                                                                                                                  .bn{background-position:-32px -154px;}
                                                                                                                                                                  .bo{background-position:-32px -165px;}
                                                                                                                                                                  .br{background-position:-32px -198px;}
                                                                                                                                                                  .bs{background-position:-32px -209px;}
                                                                                                                                                                  .bt{background-position:-32px -220px;}
                                                                                                                                                                  .bv{background-position:-32px -242px;}
                                                                                                                                                                  .bw{background-position:-32px -253px;}
                                                                                                                                                                  .by{background-position:-32px -275px;}
                                                                                                                                                                  .bz{background-position:-32px -286px;}
                                                                                                                                                                  .ca{background-position:-48px -11px;}
                                                                                                                                                                  .cc{background-position:-48px -33px;}
                                                                                                                                                                  .cd{background-position:-48px -44px;}
                                                                                                                                                                  .cf{background-position:-48px -66px;}
                                                                                                                                                                  .cg{background-position:-48px -77px;}
                                                                                                                                                                  .ch{background-position:-48px -88px;}
                                                                                                                                                                  .ci{background-position:-48px -99px;}
                                                                                                                                                                  .ck{background-position:-48px -121px;}
                                                                                                                                                                  .cl{background-position:-48px -132px;}
                                                                                                                                                                  .cm{background-position:-48px -143px;}
                                                                                                                                                                  .cn{background-position:-48px -154px;}
                                                                                                                                                                  .co{background-position:-48px -165px;}
                                                                                                                                                                  .cr{background-position:-48px -198px;}
                                                                                                                                                                  .cu{background-position:-48px -231px;}
                                                                                                                                                                  .cv{background-position:-48px -242px;}
                                                                                                                                                                  .cx{background-position:-48px -264px;}
                                                                                                                                                                  .cy{background-position:-48px -275px;}
                                                                                                                                                                  .cz{background-position:-48px -286px;}
                                                                                                                                                                  .de{background-position:-64px -55px;}
                                                                                                                                                                  .dj{background-position:-64px -110px;}
                                                                                                                                                                  .dk{background-position:-64px -121px;}
                                                                                                                                                                  .dm{background-position:-64px -143px;}
                                                                                                                                                                  .do{background-position:-64px -165px;}
                                                                                                                                                                  .dz{background-position:-64px -286px;}
                                                                                                                                                                  .ec{background-position:-80px -33px;}
                                                                                                                                                                  .ee{background-position:-80px -55px;}
                                                                                                                                                                  .eg{background-position:-80px -77px;}
                                                                                                                                                                  .eh{background-position:-80px -88px;}
                                                                                                                                                                  .er{background-position:-80px -198px;}
                                                                                                                                                                  .es{background-position:-80px -209px;}
                                                                                                                                                                  .et{background-position:-80px -220px;}
                                                                                                                                                                  .fi{background-position:-96px -99px;}
                                                                                                                                                                  .fj{background-position:-96px -110px;}
                                                                                                                                                                  .fk{background-position:-96px -121px;}
                                                                                                                                                                  .fm{background-position:-96px -143px;}
                                                                                                                                                                  .fo{background-position:-96px -165px;}
                                                                                                                                                                  .fr{background-position:-96px -198px;}
                                                                                                                                                                  .ga{background-position:-112px -11px;}
                                                                                                                                                                  .gb{background-position:-112px -22px;}
                                                                                                                                                                  .gd{background-position:-112px -44px;}
                                                                                                                                                                  .ge{background-position:-112px -55px;}
                                                                                                                                                                  .gf{background-position:-112px -66px;}
                                                                                                                                                                  .gg{background-position:-112px -77px;}
                                                                                                                                                                  .gh{background-position:-112px -88px;}
                                                                                                                                                                  .gi{background-position:-112px -99px;}
                                                                                                                                                                  .gl{background-position:-112px -132px;}
                                                                                                                                                                  .gm{background-position:-112px -143px;}
                                                                                                                                                                  .gn{background-position:-112px -154px;}
                                                                                                                                                                  .gp{background-position:-112px -176px;}
                                                                                                                                                                  .gq{background-position:-112px -187px;}
                                                                                                                                                                  .gr{background-position:-112px -198px;}
                                                                                                                                                                  .gs{background-position:-112px -209px;}
                                                                                                                                                                  .gt{background-position:-112px -220px;}
                                                                                                                                                                  .gu{background-position:-112px -231px;}
                                                                                                                                                                  .gw{background-position:-112px -253px;}
                                                                                                                                                                  .gy{background-position:-112px -275px;}
                                                                                                                                                                  .hk{background-position:-128px -121px;}
                                                                                                                                                                  .hm{background-position:-128px -143px;}
                                                                                                                                                                  .hn{background-position:-128px -154px;}
                                                                                                                                                                  .hr{background-position:-128px -198px;}
                                                                                                                                                                  .ht{background-position:-128px -220px;}
                                                                                                                                                                  .hu{background-position:-128px -231px;}
                                                                                                                                                                  .id{background-position:-144px -44px;}
                                                                                                                                                                  .ie{background-position:-144px -55px;}
                                                                                                                                                                  .il{background-position:-144px -132px;}
                                                                                                                                                                  .im{background-position:-144px -143px;}
                                                                                                                                                                  .in{background-position:-144px -154px;}
                                                                                                                                                                  .io{background-position:-144px -165px;}
                                                                                                                                                                  .iq{background-position:-144px -187px;}
                                                                                                                                                                  .ir{background-position:-144px -198px;}
                                                                                                                                                                  .is{background-position:-144px -209px;}
                                                                                                                                                                  .it{background-position:-144px -220px;}
                                                                                                                                                                  .je{background-position:-160px -55px;}
                                                                                                                                                                  .jm{background-position:-160px -143px;}
                                                                                                                                                                  .jo{background-position:-160px -165px;}
                                                                                                                                                                  .jp{background-position:-160px -176px;}
                                                                                                                                                                  .ke{background-position:-176px -55px;}
                                                                                                                                                                  .kg{background-position:-176px -77px;}
                                                                                                                                                                  .kh{background-position:-176px -88px;}
                                                                                                                                                                  .ki{background-position:-176px -99px;}
                                                                                                                                                                  .km{background-position:-176px -143px;}
                                                                                                                                                                  .kn{background-position:-176px -154px;}
                                                                                                                                                                  .kp{background-position:-176px -176px;}
                                                                                                                                                                  .kr{background-position:-176px -198px;}
                                                                                                                                                                  .kw{background-position:-176px -253px;}
                                                                                                                                                                  .ky{background-position:-176px -275px;}
                                                                                                                                                                  .kz{background-position:-176px -286px;}
                                                                                                                                                                  .la{background-position:-192px -11px;}
                                                                                                                                                                  .lb{background-position:-192px -22px;}
                                                                                                                                                                  .lc{background-position:-192px -33px;}
                                                                                                                                                                  .li{background-position:-192px -99px;}
                                                                                                                                                                  .lk{background-position:-192px -121px;}
                                                                                                                                                                  .lr{background-position:-192px -198px;}
                                                                                                                                                                  .ls{background-position:-192px -209px;}
                                                                                                                                                                  .lt{background-position:-192px -220px;}
                                                                                                                                                                  .lu{background-position:-192px -231px;}
                                                                                                                                                                  .lv{background-position:-192px -242px;}
                                                                                                                                                                  .ly{background-position:-192px -275px;}
                                                                                                                                                                  .ma{background-position:-208px -11px;}
                                                                                                                                                                  .mc{background-position:-208px -33px;}
                                                                                                                                                                  .md{background-position:-208px -44px;}
                                                                                                                                                                  .mf{background-position:-208px -66px;}
                                                                                                                                                                  .mg{background-position:-208px -77px;}
                                                                                                                                                                  .mh{background-position:-208px -88px;}
                                                                                                                                                                  .mk{background-position:-208px -121px;}
                                                                                                                                                                  .ml{background-position:-208px -132px;}
                                                                                                                                                                  .mm{background-position:-208px -143px;}
                                                                                                                                                                  .mn{background-position:-208px -154px;}
                                                                                                                                                                  .mo{background-position:-208px -165px;}
                                                                                                                                                                  .mp{background-position:-208px -176px;}
                                                                                                                                                                  .mq{background-position:-208px -187px;}
                                                                                                                                                                  .mr{background-position:-208px -198px;}
                                                                                                                                                                  .ms{background-position:-208px -209px;}
                                                                                                                                                                  .mt{background-position:-208px -220px;}
                                                                                                                                                                  .mu{background-position:-208px -231px;}
                                                                                                                                                                  .mv{background-position:-208px -242px;}
                                                                                                                                                                  .mw{background-position:-208px -253px;}
                                                                                                                                                                  .mx{background-position:-208px -264px;}
                                                                                                                                                                  .my{background-position:-208px -275px;}
                                                                                                                                                                  .mz{background-position:-208px -286px;}
                                                                                                                                                                  .na{background-position:-224px -11px;}
                                                                                                                                                                  .nc{background-position:-224px -33px;}
                                                                                                                                                                  .ne{background-position:-224px -55px;}
                                                                                                                                                                  .nf{background-position:-224px -66px;}
                                                                                                                                                                  .ng{background-position:-224px -77px;}
                                                                                                                                                                  .ni{background-position:-224px -99px;}
                                                                                                                                                                  .nl{background-position:-224px -132px;}
                                                                                                                                                                  .no{background-position:-224px -165px;}
                                                                                                                                                                  .np{background-position:-224px -176px;}
                                                                                                                                                                  .nr{background-position:-224px -198px;}
                                                                                                                                                                  .nu{background-position:-224px -231px;}
                                                                                                                                                                  .nz{background-position:-224px -286px;}
                                                                                                                                                                  .om{background-position:-240px -143px;}
                                                                                                                                                                  .pa{background-position:-256px -11px;}
                                                                                                                                                                  .pe{background-position:-256px -55px;}
                                                                                                                                                                  .pf{background-position:-256px -66px;}
                                                                                                                                                                  .pg{background-position:-256px -77px;}
                                                                                                                                                                  .ph{background-position:-256px -88px;}
                                                                                                                                                                  .pk{background-position:-256px -121px;}
                                                                                                                                                                  .pl{background-position:-256px -132px;}
                                                                                                                                                                  .pm{background-position:-256px -143px;}
                                                                                                                                                                  .pn{background-position:-256px -154px;}
                                                                                                                                                                  .pr{background-position:-256px -198px;}
                                                                                                                                                                  .ps{background-position:-256px -209px;}
                                                                                                                                                                  .pt{background-position:-256px -220px;}
                                                                                                                                                                  .pw{background-position:-256px -253px;}
                                                                                                                                                                  .py{background-position:-256px -275px;}
                                                                                                                                                                  .qa{background-position:-272px -11px;}
                                                                                                                                                                  .re{background-position:-288px -55px;}
                                                                                                                                                                  .ro{background-position:-288px -165px;}
                                                                                                                                                                  .ru{background-position:-288px -231px;}
                                                                                                                                                                  .rw{background-position:-288px -253px;}
                                                                                                                                                                  .sa{background-position:-304px -11px;}
                                                                                                                                                                  .sb{background-position:-304px -22px;}
                                                                                                                                                                  .sc{background-position:-304px -33px;}
                                                                                                                                                                  .sd{background-position:-304px -44px;}
                                                                                                                                                                  .se{background-position:-304px -55px;}
                                                                                                                                                                  .sg{background-position:-304px -77px;}
                                                                                                                                                                  .sh{background-position:-304px -88px;}
                                                                                                                                                                  .si{background-position:-304px -99px;}
                                                                                                                                                                  .sj{background-position:-304px -110px;}
                                                                                                                                                                  .sk{background-position:-304px -121px;}
                                                                                                                                                                  .sl{background-position:-304px -132px;}
                                                                                                                                                                  .sm{background-position:-304px -143px;}
                                                                                                                                                                  .sn{background-position:-304px -154px;}
                                                                                                                                                                  .so{background-position:-304px -165px;}
                                                                                                                                                                  .sr{background-position:-304px -198px;}
                                                                                                                                                                  .st{background-position:-304px -220px;}
                                                                                                                                                                  .sv{background-position:-304px -242px;}
                                                                                                                                                                  .sy{background-position:-304px -275px;}
                                                                                                                                                                  .sz{background-position:-304px -286px;}
                                                                                                                                                                  .tc{background-position:-320px -33px;}
                                                                                                                                                                  .td{background-position:-320px -44px;}
                                                                                                                                                                  .tf{background-position:-320px -66px;}
                                                                                                                                                                  .tg{background-position:-320px -77px;}
                                                                                                                                                                  .th{background-position:-320px -88px;}
                                                                                                                                                                  .tj{background-position:-320px -110px;}
                                                                                                                                                                  .tk{background-position:-320px -121px;}
                                                                                                                                                                  .tl{background-position:-320px -132px;}
                                                                                                                                                                  .tm{background-position:-320px -143px;}
                                                                                                                                                                  .tn{background-position:-320px -154px;}
                                                                                                                                                                  .to{background-position:-320px -165px;}
                                                                                                                                                                  .tr{background-position:-320px -198px;}
                                                                                                                                                                  .tt{background-position:-320px -220px;}
                                                                                                                                                                  .tv{background-position:-320px -242px;}
                                                                                                                                                                  .tw{background-position:-320px -253px;}
                                                                                                                                                                  .tz{background-position:-320px -286px;}
                                                                                                                                                                  .ua{background-position:-336px -11px;}
                                                                                                                                                                  .ug{background-position:-336px -77px;}
                                                                                                                                                                  .um{background-position:-336px -143px;}
                                                                                                                                                                  .us{background-position:-336px -209px;}
                                                                                                                                                                  .uy{background-position:-336px -275px;}
                                                                                                                                                                  .uz{background-position:-336px -286px;}
                                                                                                                                                                  .va{background-position:-352px -11px;}
                                                                                                                                                                  .vc{background-position:-352px -33px;}
                                                                                                                                                                  .ve{background-position:-352px -55px;}
                                                                                                                                                                  .vg{background-position:-352px -77px;}
                                                                                                                                                                  .vi{background-position:-352px -99px;}
                                                                                                                                                                  .vn{background-position:-352px -154px;}
                                                                                                                                                                  .vu{background-position:-352px -231px;}
                                                                                                                                                                  .wf{background-position:-368px -66px;}
                                                                                                                                                                  .ws{background-position:-368px -209px;}
                                                                                                                                                                  .ye{background-position:-400px -55px;}
                                                                                                                                                                  .yt{background-position:-400px -220px;}
                                                                                                                                                                  .za{background-position:-416px -11px;}
                                                                                                                                                                  .zm{background-position:-416px -143px;}
                                                                                                                                                                  .zw{background-position:-416px -253px;}
                                                                                                                                                                    +1
                                                                                                                                                                    И зачем это было писать?
                                                                                                                                                                      0
                                                                                                                                                                      судя по всему человек проделал хорошую работу — css стили, для использования этой картинки как спрайта на веб страницах
                                                                                                                                                                        +2
                                                                                                                                                                        хотя нет, выше по комментариям есть ссылка на пример
                                                                                                                                                                        2 строчки javascript для вытаскивания нужного флага — это реально классная идея)
                                                                                                                                                                        +1
                                                                                                                                                                        а как вы иначе собираетесь спрайт вставлять если javascript отключен?
                                                                                                                                                                          0
                                                                                                                                                                          Ну есть разные варианты, красивые и не очень, дело даже не в этом.
                                                                                                                                                                          Вопрос в том, нафига такой коммент то было писать сюда?
                                                                                                                                                                            0
                                                                                                                                                                            Это может быть интересно. Какие? Генерировать css с помощью php? Если вам пустое место важней технического решения, закидаете минусами — оно само спрячется
                                                                                                                                                                              0
                                                                                                                                                                              Да ладно вам прибедняться, минусами…
                                                                                                                                                                              Варианты:

                                                                                                                                                                              <div class="flag" style="background-position:-416px -253px;">&nbsp;</div>


                                                                                                                                                                              и прочие вещи, связанные с style.

                                                                                                                                                                              Совершенно верно, ваш метод красивее, правильнее и я бы заставил верстальщика сделать именно так, но писать весь css тут — напрасно :)
                                                                                                                                                                        +1
                                                                                                                                                                        ояебу! реальни!
                                                                                                                                                                        +1
                                                                                                                                                                        только мне кажется что там 2 флага сша? UM и US. Вечно они выделиться хотят)
                                                                                                                                                                          +1
                                                                                                                                                                          Вон оно как оказывается: .um — национальный домен верхнего уровня для Американских Внешних Малых островов.
                                                                                                                                                                          0
                                                                                                                                                                          Место XX еще свободно? :-)
                                                                                                                                                                            0
                                                                                                                                                                            skepe.com использует эту картинку для отображения страны пользователя. В подвале рядом с выбором языка.

                                                                                                                                                                            skype.com/i/images/flags/flags_matrix.png
                                                                                                                                                                              0
                                                                                                                                                                              извиняюсь skype.com*
                                                                                                                                                                              –2
                                                                                                                                                                              Украинизация ;)
                                                                                                                                                                                +3
                                                                                                                                                                                Кто меня минусует, отписывайтесь! :(
                                                                                                                                                                                  +1
                                                                                                                                                                                  Должно быть либо везде Украина, либо пустое поле, а так ни туда и не сюда
                                                                                                                                                                                  0

                                                                                                                                                                                  а есть какие-нибудь права на использование этих иконок?
                                                                                                                                                                                    +1
                                                                                                                                                                                    Они бесплатные. Источник иконок — famfamfam.com.
                                                                                                                                                                                      0
                                                                                                                                                                                      Благодарю.

                                                                                                                                                                                  Only users with full accounts can post comments. Log in, please.