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

 

Браузер lynx. Создание sitemap.xml

 

Существует немало онлайн сервисов для создания sitemap.xml. Однако его можно сделать и самому на своем компьютере, используя браузер lynx и несколько утилит командной строки Linux. Далее описывается пример использующего их bash-скрипта, названного "sitemap.sh". Bash-скрипт, который создает файл sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > /dev/null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat >> /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e 's/\<www\>\.//g' | sort | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i 's/\&/\&amp\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i "s/'/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i 's/"/\&quot\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i 's/>/\&gt\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i 's/</\&lt\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i 's/http:\/\//http:\/\/www\./g' /home/me/sitemap/sitemap/sitemap.xml sed -i -e 's/^/<url><loc>/' /home/me/sitemap/sitemap/sitemap.xml sed -i -e 's/$/<\/loc><\/url>/' /home/me/sitemap/sitemap/sitemap.xml sed -i -e '1 i <?xml version="1\.0" encoding="UTF-8"?>\r\r<urlset xmlns="http:\/\/www\.sitemaps\.org\/schemas\/sitemap\/0\.9" xmlns:xsi="http:\/\/www\.w3\.org\/2001\/XMLSchema-instance" xsi:schemaLocation="http:\/\/www\.sitemaps\.org\/schemas\/sitemap\/0\.9 http:\/\/www\.sitemaps\.org\/schemas\/sitemap\/0\.9\/sitemap\.xsd">\r\r<!-- created by sitemap.sh from http:\/\/www.compmiscellanea.com\/en\/lynx-browser-creating-sitemap.xml\.htm -->\r\r' /home/me/sitemap/sitemap/sitemap.xml sed -i -e '$ a \\r</urlset>' /home/me/sitemap/sitemap/sitemap.xml sed -i '/static/d' /home/me/sitemap/sitemap/sitemap.xml echo "...Done" После того, как файл с bash-скриптом готов: "chmod +x sitemap.sh", что бы сделать его исполняемым. Скачать sitemap.sh в архиве sitemap.sh.tar.gz ( После того, как архив загружен и распакован, в файле заменить http://www.compmiscellanea.com/ на нужное доменное имя сайта с "www" и заменить http://compmiscellanea.com/ на нужное доменное имя сайта без "www". Вместо "static" в последней строке файла поставить строку, которую должны содержать ссылки, что бы они были удалены из списка. Затем "chmod +x sitemap.sh". Затем запустить sitemap.sh ). Комментарии Скачать sitemap2.sh с построчными комментариями в архиве sitemap2.sh.tar.gz. Перед тем, как запустить bash-скрипт, нужно создать три папки. Так как браузер lynx в каких-то случаях может пропустить некоторые ссылки, если доменное имя сайта будет указано с или без "www", то bash-скрипт запускает lynx дважды, обрабатывая сайт по доменному имени с "www" и обрабатывая сайт по доменному имени без "www". Получающиеся два файла помещаются в две разные папки, здесь это "/home/me/sitemap/www/" и "/home/me/sitemap/www2/". А директория "/home/me/sitemap/sitemap/" предназначена для создаваемого sitemap.xml. 1. Путь к bash #!/bin/bash 2. Переход в папку - браузер lynx поместит туда файлы, полученные при обработке сайта по доменному имени с "www" cd /home/me/sitemap/www/ 3.

Консольные приложения для 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.