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

 

Internet Explorer 3

 

Возможности : Скриншоты : Где скачать World Wide Web / Всемирная паутина с её гипертекстовыми ссылками, просмотром веб-документов онлайн, веб-страницами как совокупностью текста и изображений / мультимедиа принесла Интернет в массы. Что касается масс, то все эти возможности во многом вращаются вокруг веб браузера. В самом первом браузере, WorldWideWeb (позже переименованном в Nexus) были реализованы многие из возможностей, которые позже стали рассматриваться как стандартные для всех веб браузеров. Но он был экспериментом, к которому имели доступ и с которым были знакомы очень немногие. Остальные пользователи более вероятно могли ожидать только среду с текстовым интерфейсом, текстовые браузеры, что-нибудь в роде Line Mode Browser. Поворотным моментом для World Wide Web / Всемирной паутины и всего Интернета было появление Mosaic, графического браузера в 1993. Сначала для Unix, а затем для Apple Macintosh и Microsoft Windows. Mosaic не был однако первым браузером для Windows и не смог заместить Cello, первый и изначально единственный браузер для Windows. Microsoft Windows была самой растущей основной платформой для PC в первой половине 1990ых. Но Microsoft кажется не видел тогда важности браузера. Так что основная конкуренция под Windows происходила в то время между несколькими версиями Mosaic и Cello. Соревнование породило браузер Netscape, который несколько лет доминировал в своей нише. Этот успех и внимание общественности, которое стала привлекать World Wide Web / Всемирная паутина к 1995 сподвигли Microsoft присоединиться к процессу. Internet Explorer 1 был просто первым экспериментом. Internet Explorer 2 предназначался для того, чтобы продвинуть дело браузера Internet Explorer - его сделали доступным и бесплатным для всех пользователей Windows, даже для коммерческих организаций. Но позиции Netscape не были особенно поколеблены; то, что Internet Explorer 2 был явно слабее во многих возможностях, было одно из причин для этого. Только после выпуска Internet Explorer 3.0 браузеры Microsoft начали нагонять Netscape. Internet Explorer 3 не был первой попыткой Microsoft найти оптимальную техническую и маркетинговую модель как были Internet Explorers of 1 and 2. И не был он первым современным браузером Microsoft, первым для Microsoft, который обогнал Netscape и всех других конкурентов как Internet Explorer 4. Но тем не менее, Internet Explorer 3 был первым в чем-то: первый коммерческий браузер с поддержкой CSS, первый браузер Microsoft без кода Spyglass и первый браузер Microsoft, который получил значительную долю пользователей, 20-39% к концу 1997 [ 1 ]. Internet Explorer 3 был переходным, промежуточным образцом программного обеспечения между ранними и современными браузерами. Что касается его современного состояния, то есть интересный момент: Internet Explorer 3 может работать под 32-битной Windows 7, в отличии от того, что в обычном случае имеет место с Internet Explorer версий 4.0-6.0. Возможности Поддержка HTML (с таблицами и фреймами) вполне неплохая ( Подробнее ), Internet Explorer 3 позволяет использовать без лишних усилий некоторые приемы HTML, как например "Границы HTML таблиц без CSS". Поддержка CSS в Internet Explorer 3 слабая ( Подробнее 1) ( Подробнее 2 ). Internet Explorer 3 так же поддерживает VBScript, ActiveX (более 1 000 управляющих элементов), Java апплеты, внедренную на странице мультимедиа, VRML и версию JavaScript от Microsoft, JScript. Всё версий и возможностей соответствующих уровню тех лет. Internet Explorer 3 бы выпущен для нескольких платформ: x86(16/32 bit), 68k, PPC, MIPS, Alpha AXP.

Распаковать несколько архивов

 

Распаковать с помощью unzip в командной строке Linux несколько zip-архивов в один каталог. Вопреки возможным ожиданиям, "unzip *.zip" работать не будет, *.zip необходимо взять в кавычки: unzip "*.zip" В архивах могут быть файлы с одинаковыми именами. Чтобы избежать перезаписи: unzip -B "*.zip" "Unzip -B" в процессе распаковки перезаписывает файлы с одинаковыми именами, но сохраняет их резервные копии. Новые имена для этих файлов создаются добавлением тильды ("~") в конец изначальных названий файлов. Если имеется расширение, то "~" добавляется после него. Если этого недостаточно, после тильды ("~") прибавляется уникальная последовательность цифр (до 5 знаков). "Unzip -B" не слишком рабочее решение. Например, поскольку диапазон последовательностей цифр может израсходоваться (99999 знаков, или 65535 для 16-битных систем), резервный файл с максимальным числом диапазона после "~" в названии стирается и замещается без уведомления новой резервной копией ( Более подробно ). Число файлов в архиве может быть не всегда известно заранее или оно может быть больше диапазона доступных чисел, так что "Unzip -B" не лучший вариант. Переименование файлов с одинаковыми именами с помощью добавления "~" в конце имен, после расширения тоже не слишком удобно. Но другой встроенный вариант еще хуже. Если модификатор "-B" не используется, то каждый раз, как распаковывается файл с таким же именем как уже был извлечен, unzip спрашивает "replace example.txt? [y]es, [n]o, [A]ll, [N]one, [r]ename:" ("заместить example.txt? да, нет, все, ни один, переименовать:"). Каждый раз нужно нажимать на "r" и каждый раз вводить новое имя. Так что для решения проблемы вероятно следует создать и использовать какой-то скрипт, bash или иной.