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

 

Консольные приложения для Windows. Веб браузеры

 

Lynx : Links : ELinks Текстовые, они же консольные веб браузеры более типичны для среды Linux и других юниксоподобных систем. Там текстовые веб браузеры были созданы, там находится их основная линия развития. Очень немногие (например, Wanna-Be / WannaBe для классических Mac OS) консольные веб браузеры были созданы изначально для каких-то других операционных систем. И текстовые веб браузеры для Windows являются версиями консольных веб браузеров *nix систем. Хотя те из них, что работают не в среде Cygwin, имеют свои небольшие особенности. Когда-то текстовые веб браузеры были важным средством для просмотра веб документов. По мере развития программ с графическим интерфейсом далее в dial-up эпоху, текстовые веб браузеры были полезны как самый быстрый способ просмотра веб документов и как часть комплексов приложений для преобразования текста в речь. Распространение широкополосного интернета и специализированного софта для звуковой передачи содержания веб-страниц сократили сферу применения консольных веб браузеров. Тем более, что большинство пользователей Windows всегда имели весьма смутное представление о их существовании. Тем не менее, текстовые веб браузеры представляют собой высокоразвитые специализированные средства, которые могут пригодиться в самых разных ситуациях и при использовании операционной системы Windows. Lynx - / home page / Текстовый веб браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS и классических Mac OS. HTML ( Подробнее 1 ) ( Подробнее 2 ) Lynx 2.8.5rel.1: lynx.isc.org Lynx 2.8.5rel.1: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.5rel.1: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.5rel.1: ebay.com Lynx 2.8.5rel.1: kompx.com/en/web-browsers-for-dos.htm Lynx 2.8.5rel.1: twitter.com Links - / home page / Текстовый веб браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, BeOS, Haiku, OS/2, DOS, Windows.

CSS только для Firefox

 

CSS только для браузера Firefox: В Firefox этот текст красного цвета HTML / XHTML. Код: <p>В Firefox этот текст красного цвета</p> CSS. Код: @-moz-document url-prefix() {p {color: #f00;}} В отличии от способа применения CSS только для Opera, по существу является хаком - поскольку правило изначально предназначалось для другой цели. Однако отсутствие поддержки в других браузерах позволяет изолировать код для использования только веб браузером Firefox. [ 1 ] Другие браузеры с движком Gecko, как SeaMonkey 1.0+ или более старый Netscape 9.0, так же поддерживают данный CSS хак. [ 2 ] Разные версии Internet Explorer, Google Chrome, Opera, Safari реагируют на хак так, как им и полагается - эти браузеры игнорируют весь код хака. [ 3 ] Есть еще один браузер, где текст становится красным - ELinks, текстовый веб браузер с некоторой поддержкой CSS.