Kompx.com or Compmiscellanea.com

CSS ролловер. Изменение положения фонового изображения

Windows : Internet Explorer 5.01+, Firefox 1.0+, Google Chrome, Opera 7.0+, Safari 3.1+, SeaMonkey 1.0+, [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 7.0+, SeaMonkey 1.0+, hv3, [ 2 ].

CSS ролловер. Изменение положения фонового изображения. Пример:

HTML / XHTML. Код:

<div class="example">

<a href="css-rollover-izmenenie-polozhenija-fonovogo-izobrazhenija.htm">CSS ролловер. Изменение положения фонового изображения</a>

</div>

CSS. Код:

.example {position: relative; top: 0px; left: 0px; height: auto; width: 100%; white-space: nowrap; padding: 10px 20px 10px 20px;}

.example a {height: 35px; width: 100%; font-size: 24px; line-height: 35px; color: #006; text-decoration: none; text-align: right; display: block; background: url("bgimg.png") no-repeat left top;}

.example a:hover {color: #c00; background: url("bgimg.png") no-repeat left bottom;}

Фоновое изображение:

CSS ролловер

Изменение положения фонового изображения

Общая идея :

1. Создается ссылка с явно указанными width, height (в данном случае 674px и 35px) и display: block - это образует прямоугольник размером 674px на 35px, вся область которого представляет собой гиперссылку. line-height так же указывается в явном виде, со значением равным высоте прямоугольника (в данном случае 35px) - это способствует тому, что бы вертикальное выравнивание текста ссылки было одинаковым в разных браузерах. text-align: right добавляется, что бы поместить текст ссылки в правую часть блока.

(Область блока с ссылкой выделена зеленым цветом для большей наглядности)

2. Создается изображение для фона блока с ссылкой высотой в две высоты этого блока. У изображения две части, верхняя и нижняя, каждая высотой равная высоте области блока с ссылкой; в данном случае 35px.

3. URL фонового изображения добавляется к CSS свойству фона псевдоклассов :link, :visited, :active ссылки. CSS значения no-repeat и left свойства background позиционируют фоновое изображение в левой части блока с ссылкой. CSS значение top свойства background помещает верхнюю часть фонового изображения на один уровень с текстом ссылки.

4. URL фонового изображения добавляется к CSS свойству фона псевдокласса :hover ссылки. CSS значения no-repeat и left свойства background псевдокласса :hover ссылки позиционируют фоновое изображение в левой части блока с ссылкой. CSS значение bottom свойства background псевдокласса :hover ссылки помещает нижнюю часть фонового изображения на один уровень с текстом ссылки, когда пользователь наводить курсор мыши на область блока с ссылкой.

Таким образом, когда курсор мыши не наведен на область блока с ссылкой, верхняя часть фонового изображения находится на одном уровне с текстом. Когда курсор мыши наводится на область блока с ссылкой, нижняя часть фонового изображения перемещается на одним уровень с текстом. Mouse out - отображается верхняя часть фонового изображения, mouse over - отображается нижняя часть фонового изображения. И нет необходимости в предзагрузке дополнительных рисунков.

Этот CSS ролловер может быть использован для создания групп, таких как меню - помещаться в div'ы, li, td или другие подобные элементы HTML.

Существуют так же другие способы создания ролловеров, как с помощью CSS, так и используя иные технологии: JavaScript, VBScript, Java, Flash, некоторые другие.


[ 1 ]

А так же Mozilla 1.0+, Netscape 7.01+. Netscape 6.0+, если используются имена CSS классов или id без символа подчёркивания ( _ ) в них.

[ 2 ]

А так же Mozilla 1.0+, Netscape 7.01+. Netscape 6.0+, если используются имена CSS классов или id без символа подчёркивания ( _ ) в них.


Aliosque subditos et thema

 

Текстовые браузеры для Linux

 

Lynx : Links : ELinks : W3m : Netrik : Retawq : Line mode browser Когда появились дистрибутивы Linux для более или менее широкой публики, просмотр веб-страниц онлайн был недавним явлением, хотя какой-то путь был пройден. Уже существовало несколько браузеров, многие из которых были постепенно портированы под Linux. Некоторые текстовые браузеры были в первой волне. И через какое-то время Linux стал основной средой для текстовых браузеров, где большинство из них развивается и используется. Даже если они большей частью и предназначены не только для Linux, но так же и для различных других *nix систем. Существуют и их порты под множество других операционных систем для самых разных платформ. Lynx - / home page / Текстовый браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS и классических Mac OS. HTML ( Подробнее 1 ) ( Подробнее 2 ) Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: lynx.isc.org Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: ebay.com Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: kompx.com/en/elinks.htm Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: twitter.com Links - / home page 1 : home page 2 / Текстовый браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, BeOS, Haiku, OS/2, DOS, Windows.

Imapsync. Перенос почты

 

Перенос почты c одного IMAP сервера на другой с помощью imapsync [ 1 ] / Linux, командная строка: imapsync --host1 imap.this.com --user1 email@example.com --passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 email@example.com --passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch - Имеется сайт example.com и почтовый ящик email@example.com на сервере некоей хостинговой компании. IMAP сервер: imap.this.com. IMAP сервер поддерживает SSL. - Осуществляется перенос сайта example.com к другому хостеру. Соответственно, и почтового ящика email@example.com со всем его содержимым и с сохранением структуры папок. IMAP сервер другого хостинг-провайдера: imap.another.com. IMAP сервер поддерживает SSL. 1. Создать почтовый ящик email@example.com и пароль к нему на сервере той хостинговой компании, куда происходит перенос. 2. Создать два текстовых файла в папке /home/user/imap/: passwordfile1 с паролем к почтовому ящику на первом IMAP сервере и passwordfile2 с паролем к почтовому ящику на втором IMAP сервере. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Установить imapsync 6. Запустить imapsync с соответствующими параметрами и данными Imapsync переносит почту с сохранением структуры папок с imap.this.com на imap.another.com. SSL используется для шифрования данных в процессе передачи, а пароли сохранены в файлах, защищенных установкой прав доступа chmod 600. Перенос почты между двумя сервисами электронной почты может потребовать использования дополнительных параметров [ 2 ] imapsync. Например, при переносе содержимого одного почтового ящика Gmail.com на другой необходимо указать "--port1" и "--port2": imapsync --host1 imap.gmail.com --port1 993 --user1 email1@gmail.com --passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.gmail.com --port2 993 --user2 email2@gmail.com --passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch [ 1 ] Простой и обычный случай: содержимое одного электронного почтового ящика переносится на другой - пустой, находящийся на другом сервере. Но могут быть и более сложные ситуации: Gmail to Google Apps Email Migration and Moving to Google Apps with imapsync. [ 2 ] Другие параметры: Migrate mail from one server to another with imapsync and imapsync(1) - Linux man page.