Вставка переключателя языков на мультиязычном wordpress блоге.Часть 2

В данной статье рассмотрим как добавить визуальные эффекты к флагам переключения между языками на мультиязычном wordpress блоге на основе плагина qtranslate. Если вы показываете только флаги (без текста) и хотите добавить эффекты при наведении указателя мыши, то Вы можете использовать CSS-стили для этого.

Способ 1. Итак
1.  Открываем на сервере  wp-content/plugins/qtranslate/flags и выясняем название изображений флагов, которые Вы используете.
2. Создаём резервную копию этих файлов!
3. Скопируйте файлы в  локальную папку на компьютере. В
Photoshop или Gimp создайте новое изображение, ширина: 36px, высота 12px, установите фон прозрачный.
4. Возьмите флаг и добавьте его в Photoshop / Gimp в качестве нового слоя.
5. Переместить флаг  до упора вправо.
6. Дублируйте слой и переместите флаг в этом слое  до упора влево (так чтобы флаги находились в непосредственной близости друг к другу и не виден фон) .
8. Уменьшите прозрачность этого слоя до желаемой величины.
9.  Имя файла должно быть таким же, как оригинал флага, например, "gb.png".

10. Выключите видимость двух слоев флаг и повторите операции с шага 2 для всех флагов вам нужно.
11.  Копируем новые флаги /wp-content/plugins/qtranslate/flags/ . Не перезаписывайте резервные копии!
В вашей таблице стилей ( style.css), добавьте следующие строки:

a.qtrans_flag:hover { background-position: -18px 0; }

Как это работает:

Так как по-умолчанию ширина флага 18px , а новое изображение флага 36 px , только Вы увидите только левую часть флага. При наведении курсора мыши, фоновое изображение (флаг) "переезжает" на 18px влево, так что только правая половина будет видна (оригинала флага).

Недостаток способа - при обновлении плагина изображения заменятся стандартными. Так что надо иметь архив сохранённых изменённых флагов.

 Способ 2. Это способ не зависит от обновления плагина, так как файлы изображений не меняются. Можно изменить прозрачность самих изображений флагов и тогда при наведении курсора мыши они будут ярче, как бы светится. Для этого просто добавить стили:

.qtrans_flag {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

.qtrans_flag:hover {
filter:alpha(opacity=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

Способ 3 . Ещё один.  Этот способ  проще, как и второй, поскольку вам не придется заменять флаги снова после обновления QTranslate.

.qtrans_flag {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}
.qtrans_flag:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}

Способ 4. Если вы хотите чтобы флаг текущего языка отличался от других то добавьте в свой файл стилей:

.qtrans_flag {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

.active .qtrans_flag {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>