Как показывать разные версии логотипа на сайте с двумя и более языками?

offtop

Сегодня расскажу как я решал задачку с выводом разных версий логотипа, на сайте с русской и английской языковой версией.

Я приготовил ДВА разных варианта подмены логотипа:

  1. Первый вариант — позволяет менять декоративные картинки и иконки — элементы, заданные через CSS. Они отсутствуют в HTML-разметке.
  2. А второй вариант — замена конетнтного изображения — которое присутствует в разметке. Чаще всего размечается тегом . Для его замены нам понадобится не сложный код на JavaScript и пара условий.

Подмена декоративного изображения через CSS

Обошёлся без JS-программирования. Просто прописал несколько стилей в CSS. И при этом всё отлично работает 🙂

В CSS ты видишь простые конструкции с использованием вложенности классов и атрибутов с конкретными значениями.

Начинаем стили с параметров по умолчанию. Я решил что английская версия более популярная и просматриваемая, поэтому по умолчанию пишу стили так — по умолчанию мы выводим английскую версию логотипа.

Но если у нас на сайте язык меняется на русский (тег и его атрибут lang=»») то стили переопределяются и вместо английской версии логотипа выводится русская.

.footer .logo:hover,
.footer .logo:active {
  background-image: url(../img/logo-en.svg);
}

html[lang=ru] .footer .logo {
  background-image: url(../img/logo-rus.svg);
}

html[lang=ru] .footer .logo:hover,
html[lang=ru] .footer .logo:active {
  background-image: url(../img/logo-rus--color.svg);
}

Способ вывода логотипа через CSS удобен тем, что позволяет реализовать показ разных версий логотипа в зависимости от состояния элемента: состояние покоя, наведение мышкой, фокус, нажатие и т п.
При этом тебе стоит понимать и помнить, что такие элементы, как логотипы — чаще всего являются контентными изображениями, так как это важная информационная часть страницы — лицо компании в интернете, поэтому добавлять логотип через CSS стоит лишь в крайних случаях.

Подмена контентного изображения в html-разметке при помощи JS

Во втором варианте мы пишем условие, в случае выполения которого у нас меняется пусть к картинке логотипа на альтернативный вариант (русский).

Если же условие проверки не верно и возвращает нам false — то путь к картинке либо не меняется, либо оставляем его без изменений. Я для объёма пожалуй оставлю подмену на английскую версию лого. Вдруг у нас по умолчанию вовсе нет картинки 🙂

if (document.documentElement.lang == 'ru') {
	document.querySelector('.logo__image').src="../img/logo-rus.svg";
	
} else {
	document.querySelector('.logo__image').src="../img/logo-en.svg";
}

Оцените статью
Code4web
Добавить комментарий