Dynamic графичен бутон, без скриптове

В момента приемат поръчки временно спряно. Извиняваме се за причиненото неудобство.

MLA ArtWebMaster студио е развитието и създаването на обекти в Ростов на Дон.

Ние също така сме ангажирани в създаването на компоненти, модули и плъгини за CMS Joomla.

Вашият сайт е статичен? Ние можем да го преместите на CMS Joomla и ще получите бърз динамичен уеб сайт.

Няма достатъчно време, за да се справят със сайта? Ние се ангажираме да подкрепят работата и сайтове за поддръжка.

Методи за създаване на динамичен бутон графичен без използването на скриптове

В тази статия ще обсъдим как да се направи точно такава

Какво е по-добър начин? Какви са предимствата на този метод, по отношение на изпълнението на прилагането на скриптове? И има ползи!

На първо място, CSS стилове са подкрепени от всички съвременни браузъри, което означава, че всеки потребител на интернет, идващи към вашия сайт ще видите точно това, което е предназначено от вас, без значение кой браузър той използва. Scripts се интерпретират като различни браузъри по различни начини и да се поддържа съвместимост различни браузъри често е необходимо да се вземат специални мерки.

На второ място, ако забраните поддръжка на скриптове на вашия браузър, за да бутон CSS ще продължи да работи. Както казах, механизмът за промяна на изображението е направено без използването на скриптове, което означава, че тя ще продължи да работи както трябва.

На трето място, изпълнението на бутоните механизъм смяна на изображението с скриптове, трябва да се уверите, че втората бутон (активна) изображението е динамично, за да пълна зареждането на страницата или поне едновременно с него. Не всички уебмастъри помнят това, и в някои сайтове могат да се видят неприятна картина, когато задържите курсора на мишката върху изображението на бутона на старите изчезва и новото е само началото, за да се зареди. Този ефект изглежда много неудобно и разваля общото впечатление от сайта. Описаният метод не разполага с този недостатък, тъй като ние ще се използва само един образ, който съдържа както изображението бутон. В допълнение, една картина е "тежи" малко по-малко от две, което означава, че страницата ще се зареди малко по-бързо.

Единственият недостатък на този метод, което е присъщо на другото, всеки метод на прилагане на динамично променящата се картина на бутона, е, че ако забраните показването на графики на вашия браузър, тогава той няма да видите красотата, която бихте искали да го покажа. В момента единственият начин да се покаже на потребителя динамична бутон, ако е забранено графика, е използването на флаш-технологии. Въпреки това, в флаш има и своите недостатъци. Например, един и същи потребител може да използва всички средства, които забраняват сваляне на флаш-обекти и т.н. Все пак, нека не се мисли за лошото, нека да мисля позитивно и се надявам, че потребителят вижда вашия сайт с графики включени в цената.

Създаване на графичен бутон

Ако ви е трудно да се направи собствения си образ на бутона, можете успешно да използвате всеки готов шарени бутон на свободните колекции, разположен на нашия уебсайт. Всички цифри са оптимизирани по размер и са групирани в съответствие с основните цветови схеми. Така че можете да изберете само най-подходящ и за използването на своя онлайн проект. Колекции са разположени на страниците безплатна колекция №1 бутони. Безплатно събиране и безплатна колекция №2 №3 бутони бутони.

Във всеки случай, трябва да се получи картина, която изглежда така:

Тук бих искал да привлека вниманието ви към формата, в който да се съхраняват тези снимки, но това не ви отведе в посока на основната тема, реших да донесе моя опит за оптимизиране на графични файлове в отделна статия. Сега просто се каже, че ще използва формат PNG е най-оптимален за този бутон.

След това запазете полученото изображение с името mybutton.png на вашия твърд диск, и след това да го качите на сайта си.

Сега можете да създадете стилове. Това може да стане по различни начини. Нека разгледаме всеки един от тях.

Методът №1. Налагане на стилове в отделен файл.

Този вариант е най-предпочитаният, тъй като вие получавате един файл, който е акумулаторна от всички стилове сайт и промяна, която можете да промените изгледа наведнъж всичките си страници.

Така че, това, което правим. Първо се определи как ще бъдат формулирани в тялото на нашите ключови страници от сайта. Предполагаме, че това ще DIV тагове. Предвижда, че на страницата, на която се показва на бутона HTML код:

Какво означава всичко това?

Тъй като на страницата файл се отваря, просто прегледайте за стилове файл (ако това не е така), така че тя да може да се зареди страницата с. Ние намираме в началото на края на страницата маркер Въведете низ пред него:

Тази линия казва на браузъра, че трябва да се зареди styles.css на файла, който се намира в същата папка със страницата. Този файл, между другото, може да се постави на всяко място на вашия сайт, най-важното правилно да се регистрирате по пътя към него.
Запазване на промените в страницата и я затвори.

Сега ние се пристъпи към създаването на механизъм за смяна на изображението с помощта на CSS стилове. За да направите това, създайте празен файл с името, което бе споменато по-рано, в този случай, styles.css и го поставете в същата папка, където редактира страницата. Ако вече имате стилове, ние я използваме. Отваряме с бележник нашия CSS файл и да направим тази там, както следва:

бутон <
шрифта: удебелен 12px Verdana, Arial, безсерифен;
текстови декорация: няма;
текст-тире: 10px;
Цвят: #FFFFCC;
фон: URL (mybutton.png);
езика: блок;
ширина: 140px;
Онлайн-височина: 24px;
височина: 24px;
>

бутон за: мишката<
фон-позиция: 0px -24px;
текстови декорация: няма;
Цвят: #FFFFCC;
>

Запазете промените и затворете файла.

шрифта: удебелен 12px Verdana, Arial, безсерифен; - установяване Verdana шрифта, Arial, безсерифен, сгъсти, размерът на 12 пиксела,

текст-тире: 10px; - текст се отмества 10 пиксела от левия фланг,

Цвят: #FFFFCC; - цвета на символите светложълто,

фон: URL (mybutton.png); - тогава ние казваме, че трябва да се вземат нашия ключов файл - mybutton.png и да го използвате като фон. Най-важното нещо правилно настроен по пътя към изображението. В този случай, картината се намира в същата папка със страницата.

езика: блок; - изход на блок маркер (правоъгълник)

ширина: 140px; - ширина 140 на пиксел блок,

Онлайн-височина: 24px; - височината на текст линия 24 на пиксела. Този пост ще предизвика етикет на бутона точно в центъра (вертикално)

височина: 24px; - височината на нашия дизайн (единица)

са необходими, за да поддържаме различни браузъри CSS файл Последните два реда, а в тях е височината на 24 пиксела, ще бъдат видими само горната част на нашия имидж.

Във втората част на самата себе си и записа механизма за смяна на изображението осъзнава. Ние просто казва на браузъра, че когато мишката върху линка, затворени в клас бутон маркер. фоновото изображение да се показва, като се започне с 24-те пиксела. По този начин, на екрана ще се появи в долната половина на нашите снимки на активните бутони, които действително се нуждаем.

бутон за: мишката <- имя-идентификатор класса стиля, который модифицирует все, что находится внутри тега A, при наведении на него курсора мыши,

фон-позиция: 0px -24px; - извличане на фоново изображение, се излиза от неговия горен ръб 24 пиксела,

текстови декорация: няма; - текстът се показва без подчертаване

Цвят: #FFFFCC; - цвета на символите светложълто,

Сега зареди страницата в браузъра и да видим резултата. Ако сте направили всичко правилно, бутонът трябва да се появи на вашата страница.

За да направите менюто на тези бутони, просто добавете към вашата страница, след като линията

следния HTML код:

И в крайна сметка ние се меню с динамично променящите ключове: