Butonul grafic dinamic, fără a script-uri

ordinele Acceptam suspendate temporar. Ne cerem scuze pentru eventualele neplăceri.

MLA Studio ArtWebMaster este dezvoltarea și crearea de site-uri din Rostov-pe-Don.

Suntem, de asemenea, implicate în crearea de componente, module si plugin-uri pentru Joomla CMS.

Site-ul dvs. este static? Ne putem muta la CMS Joomla și veți obține un site web rapid dinamic.

Nu există suficient timp pentru a face față cu site-ul? Ne angajăm de lucru pentru a sprijini și de site-uri de întreținere.

Metode de creare a unui buton grafic dinamic, fără utilizarea de script-uri

In acest articol voi discuta modul de a face doar o astfel de

Ce este o modalitate mai bună? Care sunt avantajele acestei metode, în ceea ce privește punerea în aplicare a aplicației folosind script-uri? Și există beneficii!

În primul rând, foi de stil CSS sunt suportate de toate browserele moderne, ceea ce înseamnă că orice utilizator de Internet care vine pe site-ul dvs. va vedea exact ceea ce a fost intenționat de tine, indiferent de browserul pe care o folosește. Scripturile sunt interpretate ca diferite browsere în moduri diferite și pentru a menține compatibilitatea cross-browser-ul este adesea necesar să se ia măsuri speciale.

În al doilea rând, dacă dezactivați scripting browser-ul de la butonul CSS va continua să lucreze. Așa cum am spus, mecanismul de schimbare a imaginii se face fără utilizarea de script-uri, ceea ce înseamnă că va continua să funcționeze așa cum trebuie.

În al treilea rând, punerea în aplicare a butoanelor mecanismului de schimbare a imaginii cu script-uri, trebuie să vă asigurați că al doilea buton imagine (activ) a fost încărcată dinamic timpul complet de încărcare a paginii sau cel puțin simultan cu ea. Nu toate webmasteri amintesc acest lucru, iar pe unele site-uri pot fi văzute imagine neplăcută atunci când treceți cu cursorul mouse-ului peste imaginea de pe butonul dispare vechi și nou abia începe să fie încărcate. Acest efect pare foarte inconfortabil și strică impresia de ansamblu a site-ului. Metoda descrisă nu are acest dezavantaj, deoarece vom folosi doar o singură imagine care conține atât imaginea butonul. În plus, o imagine este „cântărește“ un pic mai puțin de două, ceea ce înseamnă că pagina va fi încărcată ușor mai repede.

Singurul dezavantaj al acestei metode, care este inerentă în modul în care, orice metodă de punere în aplicare a schimbării dinamice a unei imagini de la buton, este că, dacă dezactivați afișajul browser-ul de grafica, atunci el nu va vedea frumusețea pe care doriți să-l arate. În acest moment, singura modalitate de a arăta utilizatorului un buton dinamic, în cazul în care a dezactivat programul, este utilizarea flash-tehnologii. Cu toate acestea, in flash are dezavantajele sale. De exemplu, același utilizator poate utiliza orice fonduri care interzice descărcarea de flash-obiecte, etc. Cu toate acestea, să nu se gândească la rău, să ne gândim pozitiv și speranța că utilizatorul vizionează site-ul dvs. cu o grafică inclusă.

Crearea unui buton grafic

Dacă vi se pare dificil de a face propria imagine pentru buton, puteți utiliza cu succes orice buton gata model al colecțiilor gratuite, situat pe site-ul nostru. Toate cifrele sunt optimizate în dimensiune și sunt grupate în funcție de schemele de culori primare. Deci, puteți alege doar cele mai potrivite și utilizarea proiectului său on-line. Colecțiile sunt situate pe paginile gratuite de colectare a №1 butoane. gratuit de colectare și de colectare gratuit №3 butoane butoane nr.2.

În orice caz, ar trebui să obțineți o imagine care arata ca acest lucru:

Aici aș dori să atrag atenția asupra formatului în care pentru a stoca aceste imagini, dar asta nu te ia în direcția temei principale, am decis să aduc experiența mea pentru a optimiza fișierele de imagine într-un articol separat. Acum, spun doar că va folosi formatul PNG este cel mai optim pentru acest buton.

În continuare, salvați imaginea rezultată cu numele mybutton.png pe hard disk, și apoi încărcați-l pe site-ul tau.

Acum puteți crea stiluri. Acest lucru se poate face în diverse moduri. Să luăm în considerare fiecare dintre ele.

Metoda №1. Impunerea de stiluri într-un fișier separat.

Această opțiune este cea mai preferată, deoarece veți obține un singur fișier, care este un acumulator de toate stilurile site-ului, și schimbarea pe care o puteți schimba vizualizarea o dată toate paginile.

Deci, ce facem. În primul rând vom determina modul în care vor fi precizate în corpul paginile noastre cheie ale site-ului. Presupunem că acest lucru va tag-ul div. Prevede că, pe pagina unde este afișat următorul buton de cod HTML:

Ce înseamnă toate astea?

Deoarece fișierul pagina este deschis, doar pentru a căuta fișierul stiluri (dacă nu), astfel încât să poată încărca pagina. Ne găsim în partea de sus a paginii tag-ul final și introduceți șirul în fața lui:

Această linie spune că browser-ul să încarce styles.css fișier, care se află în același folder cu pagina. Acest fișier, de altfel, poate fi plasat în orice loc de pe site, principalul lucru înregistra în mod corect calea către acesta.
Salvați modificările la pagină și închideți-l.

Acum vom trece la crearea mecanismului de schimbare a imaginii folosind foi de stil CSS. Pentru a face acest lucru, creați un fișier gol cu ​​numele care a fost menționat mai devreme, în acest caz, styles.css și puneți-l în același folder în care pagina de editat. Dacă aveți deja o foaie de stil, o folosim. Am deschis cu notepad fișierul nostru CSS și a pus acest lucru acolo, după cum urmează:

buton <
font: bold 12px Verdana, Arial, sans-serif;
text-decoration: none;
text-liniuță: 10px;
Culoare: #FFFFCC;
fundal: url (mybutton.png);
display: block;
lățime: 140px;
line-height: 24px;
înălțime: 24px;
>

Butonul a: hover<
background-position: 0px -24px;
text-decoration: none;
Culoare: #FFFFCC;
>

Salvați modificările și închideți fișierul.

font: bold 12px Verdana, Arial, sans-serif; - stabilirea font Verdana, Arial, sans-serif, îngroșată, dimensiunea de 12 pixeli,

text-liniuță: 10px; - textul este indentat 10 pixeli de pe partea stângă,

Culoare: #FFFFCC; - culoarea simbolurilor galben deschis,

fundal: url (mybutton.png); - atunci spunem că trebuie să luăm dosarul nostru cheie - mybutton.png și de a folosi ca fundal. Cel mai important lucru stabilit în mod corespunzător calea către imaginea. În acest caz, imaginea se află în același folder cu pagina.

display: block; - un bloc de ieșire tag (dreptunghi)

lățime: 140px; - lățimea 140 a blocului de pixeli,

line-height: 24px; - înălțimea liniei de text de 24 de pixeli. Această intrare va determina eticheta butonului centrat cu precizie (vertical)

înălțime: 24px; - înălțimea design-ului nostru (unitate)

Ultimele două linii sunt necesare pentru a menține fișierul nostru CSS cross-browser, iar în ele este înălțimea de 24 de pixeli vor fi vizibile numai partea superioară a imaginii noastre.

A doua parte a înregistrării în sine și în sine mecanismul de schimbare a imaginii își dă seama. Tocmai am spune browser-ului că, atunci când treceți cursorul peste link-ul, închis într-o clasă buton etichetă. imaginea de fundal pentru a fi afișată, începând cu 24 de pixeli. Astfel, ecranul va afișa jumătatea inferioară a imaginilor noastre de butoane active care de fapt avem nevoie.

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

background-position: 0px -24px; - obține o imagine de fundal, cu plecare de la muchia superioară 24 de pixeli,

text-decoration: none; - textul este afișat fără subliniere,

Culoare: #FFFFCC; - culoarea simbolurilor galben deschis,

Acum, încărcați pagina într-un browser și a vedea rezultatul. Dacă ați făcut totul corect, butonul ar trebui să apară pe pagina.

Pentru a face din meniul acestor butoane, pur și simplu adăugați la pagina dvs. după linia

următorul cod HTML:

Și, în cele din urmă vom obține un meniu cu taste în schimbare dinamic: