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

 

Netsurf : Hv3 : Dillo : Links2 Сейчас подлинные легкие веб браузеры, это такие браузеры, которые не работают или сильно ограничено работают с JavaScript и Flash. Потому что веб браузер даже с самым легким интерфейсом сделается тяжелым при работе с современным интернетом, перегруженным скриптами и мультимедией. Таких браузеров немного и часть из них движется к тому, что бы стать работающими с JavaScript - т.е. к тому, что бы выбыть из категории "Легкие веб браузеры". Легкие веб браузеры могут быть более продвинутыми - работать с CSS. Или менее - не работать с CSS или работать очень слабо. Netsurf - / home page / Самый продвинутый на данный момент легкий веб браузер для Linux. Весьма основательная поддержка CSS. Хорошая работа с HTML. Очень слабая поддержка JavaScript, которая может быть отключена. Для *nix систем есть версии, которые могут работать без X, используя framebuffer графической карты. Изначально создан для RISC OS и только потом портирован на Linux. Есть так же версии для других *nix систем, для AmigaOS, AmigaOS 4, Atari OS, BeOS/Haiku, Mac OS X, MorphOS. ( Подробнее о технических характеристиках Netsurf ) NetSurf 3.0 on PuppyLinux 5.2.8: netsurf-browser.org NetSurf 3.0 on PuppyLinux 5.2.8: w3schools.com/browsers/browsers_stats.asp NetSurf 3.0 on PuppyLinux 5.2.8: en.wikipedia.org/wiki/Netsurf NetSurf 3.0 on PuppyLinux 5.2.8: ebay.com NetSurf 3.0 on PuppyLinux 5.2.8: kompx.com/en/web-browsers-for-dos.htm NetSurf 3.0 on PuppyLinux 5.2.8: twitter.com Hv3 - / home page / Менее продвинутый легкий веб браузер для Linux, но все же имеющий значительную поддержку CSS. Слабая поддержка JavaScript / ECMAScript. Неплохая работа с HTML.

Вертикальное выравнивание CSS

 

Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения. Работает для разных комбинаций блочных и строчных элементов. Пример: Вертикальное выравнивание CSS Вертикальное выравнивание CSS HTML / XHTML. Код: <div class="parent"> <div class="child"> <div class="childcontent">Вертикальное выравнивание CSS</div> <div class="childcontent"><img src="image.jpg" width="68" height="68" alt="Image" /></div> <div class="childcontent">Вертикальное выравнивание CSS</div> </div> </div> CSS. Код: .parent {position: relative; left: 0px; top: 0px; height: 200px; display: table;} .child {position: relative; left: 0px; top: 0px; display: table-cell; vertical-align: middle;} .childcontent {position: relative; left: 0px; top: 0px;} Примечание: .parent и .childcontent могут быть выровнены по левому краю ("float: left;") или не выровнены, но чтобы этот способ вертикального выравнивания CSS сработал, .child должен быть без "float: left;". [ 1 ] А так же в Netscape 6.01+, Mozilla 0.6+. [ 2 ] А так же в Netscape 6.01+, Mozilla 0.6+.