Наверх

Показываем пользователю флаг его страны при посещении сайта

Рассмотрим небольшую практическую задачу: как показать пользователю флаг его страны, когда он заходит на ваш сайт?
Для решения этой задачи понадобятся два сервиса: Flag Sprites и freegeoip.net, рассмотренный в предыдущей статье.

1. Готовим флаги

С помощью сервиса Flag Sprites получаем архив, содержащий изображение со всеми флагами мира, и CSS-файл, определяющий координаты каждого флага. В примере рассматриваются большие флаги 32x32.
Распаковываем архив в папку проекта, например flags и подключаем полученный CSS к html странице.

2. HTML и CSS

На странице, где будет флаг, вставляем заготовку.

Для класса flag уже существует набор стилей, полученных на шаге 1. Это:

.flag {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('flags.png') no-repeat;
}

При таком решении в случае, если не удалось определить страну пользователя, ему будет показан первый слева флаг - флаг Республики Молдова. Чтобы избежать этого, стили можно переназначить или усовершенствовать, например:

.flag {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('flags.png') no-repeat;
    vertical-align: middle;
    background-position: 32px 32px;
}

После этого на странице будет зарезервировано пустое место размером 32 на 32 пикселя.

3. Определяем страну пользователя

Данный фрагмент кода на jQuery определит код страны пользователя и сгенерирует класс, который позволит "выдернуть" правильную картинку из спрайта.

$.getJSON("https://freegeoip.net/json/?callback=?", function (data) {
	var code = data.country_code;
 
	if (code) {
		var flag = 'flag-'+code.toLowerCase();	
		$('.flag').addClass(flag);			
	}		
});

Предполагается, что jQuery уже подключен к проекту. Не забывайте также, что путь к файлу flags.png нужно указывать для конкретного проекта. Если картинка не показывается, проверьте, правильно ли вы указали путь к ней.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *