Sprites
Sprite картинката е колекция от изображения съчетани в едно изображение. http заявки към сървъра. Използването на графични спрайтове ще намали броя на заявките и ще спести трафик.
Sprites – Прост пример
Вместо да се използват три отделни изображения, ние използваме само едно („img_navsprites.gif“):
Със CSS, можем да покажем само част от изображението, което ни трябва.
В следващия пример ще уточним коя част от „img_navsprites.gif“ изображението, за да се покаже:
- <img class=“home“ src=“img_trans.gif“> – Задава малко прозрачно изображение, защото src не може да бъде празен. Изображението ще бъде фоновото изображение, което задаваме в CSS
- width: 46px; height: 44px; – Определя коя част на изображението искаме да използваме
- background: URL (img_navsprites.gif) 0 0; – Определя фоновото изображение и неговата позиция (от ляво 0px, най 0px)
Това е най-лесният начин да се използват спрайтове. Сега ще разширим нещата с помощта на връзки и ховър ефекти.
Sprites – Създаване на Навигационно Меню
Искаме да използваме спрайтове („img_navsprites.gif“), за да създадете списък за навигация. Ще използваме HTML списък, защото едновременно може да бъде връзка и да има фоново изображение:
- #navlist {position:relative;} – Позицията е релативна, за да позволи абсолютно позициониране вътре в нея
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} – margin и padding са направени на 0, list-style е премахнат, и всички li са абсолютно позиционирани
- #navlist li, #navlist a {height:44px;display:block;} – височината на всички картинки са 44px
Сега нека позиционираме и стилизираме:
- #home {left:0px;width:46px;} – Позициониране на ляво, а широчината на елемента е 46px
- #home {background:url(img_navsprites.gif) 0 0;} – Дефинира фоновото изображение и позицията му (left 0px, top 0px)
- #prev {left:63px;width:43px;} – 63px на дясно (#home width 46px + малко допълнително място), а широчината е 43px.
- #prev {background:url(‘img_navsprites.gif’) -47px 0;} – Дефинира фоновото изображение 47px на дясно (#home width 46px + 1px редов разделител)
- #next {left:129px;width:43px;}- Позиционирано 129px на дясно, а широчината е 43px.
- #next {background:url(‘img_navsprites.gif’) -91px 0;} – Дефинира фоновото изображение 91px на дясно (#home width 46px + 1px редов разделител + #prev width 43px + 1px редов разделител )
Sprites – Hover Effect
Сега искаме да добавим ховър ефект в нашата навигация.
Hover се използва, за да зададем ефект на изображението, когато поставим мишката върху него.
Съвет: Може да се използва за всички елементи, а не само за връзките.
Нашата нова картинка („img_navsprites_hover.gif“) съдържа три навигационни изображения и три изображения, които да се използват при hover:
Тъй като това е един единствен образ, а не шест отделни, няма да има забавяне, когато потребителят hover-не над изображението.
Добавяме само три реда код, за да нагласим hovera:
#home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} – За всички изображения с hover определяме същата картинка, само, че с 45px по-надолу