Dinamikus grafikus gomb nélkül script
Jelenleg elfogadó megrendeléseket átmenetileg felfüggesztették. Elnézést kérünk a kellemetlenségért.
MLA ArtWebMaster stúdió a fejlődés és az új helyek Rostov-on-Don.
Mi is részt vesz a létrehozását komponensek, modulok és beépülő modulok CMS Joomla.
A site statikus? Mi lehet mozgatni a CMS Joomla és kapsz egy gyors dinamikus weboldal.
Nincs elég ideje foglalkozni az oldalon? Vállaljuk munka támogatása és karbantartása oldalak.
Módszerei olyan dinamikus grafikus gomb használata nélkül script
Ebben a cikkben lesz szó, hogyan lehet egy ilyen
Mi a jobb megoldás? Mi az előnye ennek a módszernek, végrehajtása tekintetében a kérelem szkriptek? És vannak előnyei!
Először is, CSS stíluslapok által támogatott minden modern böngésző, ami azt jelenti, hogy minden internet-felhasználó webhelyére érkező látni fogja, hogy pontosan mi volt a célja az Ön által, nem számít, melyik böngészőt használ. Scripts értelmezik a különböző böngészők eltérő módon, és megtartani a határokon böngésző kompatibilitási gyakran van szükség arra, hogy különleges intézkedéseket.
Másodszor, ha letiltja a böngésző scripting támogatást CSS gomb továbbra is működni fog. Mint mondtam, a képeltolási mechanizmus nélkül készül a parancsfájlok használatát, ami azt jelenti, hogy továbbra is működni fog, ahogy kellene.
Harmadszor, a végrehajtás a képeltolási mechanizmus gombok scriptek, meg kell győződnie arról, hogy a második (aktív) gombot a kép már dinamikusan betöltött teljes oldalak betöltési ideje, vagy legalább időben vele. Nem minden webmesterek emlékszik erre, és bizonyos oldalak látható kellemetlen kép, amikor lebeg az egérmutatót a gomb képe a régi eltűnik, és az új most kezd betölteni. Ez a hatás úgy néz ki, nagyon kényelmetlen, és rontja az általános benyomás az oldalon. A leírt módszer nem ez a hátrány, mivel fogjuk használni csak egy kép, amely mind a gomb képet. Ezen túlmenően, a kép „nyom” egy kicsit kevesebb, mint két, ami azt jelenti, hogy az oldal betöltődik valamivel gyorsabb.
Az egyetlen hátránya ennek a módszernek, amely velejárója az út, bármilyen módszer végrehajtása dinamikus változását egy képet a gomb, hogy ha letiltja a böngésző kijelző grafika, akkor nem fogja látni a szépséget, amit szeretnék megmutatni neki. Abban a pillanatban, az egyetlen módja, hogy a felhasználó egy dinamikus gomb ha letiltotta a menetrend, a vaku használata technológiák. Azonban a vaku megvannak a maga hátrányai. Például, ugyanaz a felhasználó használhat bármely alapok, amelyek tiltják a letöltés flash tárgyak, stb Azonban ne gondoljon a rossz, gondolkodjunk pozitívan, és reméljük, hogy a felhasználó a webhely grafikus tartalmazza.
Hozzon létre egy grafikus gomb
Ha úgy találja, hogy nehéz, hogy a saját képét a gombra, akkor sikeresen használja a kész mintás gomb a szabad gyűjtemények található honlapunkon. Minden adat optimalizált méretű és szerint csoportosítja az elsődleges színek. Így csak választani a legmegfelelőbb, és a használata az online projekt. Gyűjtemények találhatók oldalak ingyenes gyűjteménye №1 gomb. Ingyenes gyűjteménye és ingyenes gyűjteménye №2 №3 gombok gombok.
Mindenesetre, akkor kap egy képet, hogy néz ki:
Itt szeretném felhívni a figyelmet, hogy milyen formátumban tárolja ezeket a képeket, de ez nem visz abba az irányba, a fő téma, én úgy döntött, hogy a tapasztalatom, hogy optimalizálja a képfájlokat egy külön cikkben. Most csak annyit, hogy használni fogja a PNG formátum a legoptimálisabb erre gombot.
Ezután mentse a kapott képet, melynek neve mybutton.png a merevlemezen, majd töltse fel a helyszínen.
Most is létrehozhat stílusokat. Ezt meg lehet tenni a különböző módokon. Nézzük meg mindegyik.
A módszer №1. Kényszerítő stílusok egy külön fájlban.
Ez az opció a legelőnyösebb, mert kapsz egy fájlt, amely egy akkumulátor minden stílus helyén, és a változó, hogy meg lehet változtatni a nézetet egyszer az összes oldalt.
Szóval, mit csinálunk. Először meghatározzuk, hogyan fogják kifejtett test kulcsfontosságú oldalt az oldal. Azt feltételezzük, hogy ez a div tag. Előírja, hogy az oldalon, ahol a következő html kódot gomb jelenik meg:
Mit jelent mindez?
.Mivel az oldal fájl megnyitásakor, csak Keressük stílusok fájlt (ha nem), úgy, hogy be tudja tölteni az oldalt. Találunk a lap tetején zárócímkéjére és adja meg a húr előtte:
Ez a vonal jelzi a böngésző, hogy töltse be a fájlt styles.css található, amely ugyanabban a mappában az oldalt. Ez a fájl, az úton, lehet helyezni bárhol a webhelyen, a lényeg, rendesen regisztrálni az elérési útvonalát.
Mentse a változtatásokat az oldalon, és zárja be.
Most folytassa a létrehozását a képeltolási mechanizmus segítségével CSS stíluslapok. Ehhez hozzon létre egy üres fájlt azzal a névvel, amit korábban említettük, ebben az esetben styles.css és helyezze el ugyanabban a mappában, ahol a szerkesztett oldal. Ha már van egy stíluslapot, használjuk azt. Megnyitjuk jegyzettömb CSS fájlt, és hogy ezt odakint az alábbiak szerint:
gombot <
font: bold 12px Verdana, Arial, sans-serif;
text-decoration: none;
text-indent: 10px;
szín: #FFFFCC;
background: url (mybutton.png);
display: block;
szélesség: 140px;
line-height: 24 képpont;
magasság: 24px;
>
gombot: hover<
background-position: 0px -24px;
text-decoration: none;
szín: #FFFFCC;
>
A módosítások mentéséhez és zárja be a fájlt.
font: bold 12px Verdana, Arial, sans-serif; - annak megállapítása, Verdana betűtípust, Arial, sans-serif, megvastagodott, a mérete 12 pixel,
text-indent: 10px; - szöveg be van vágva 10 pixellel a bal szélen,
szín: #FFFFCC; - a színe a szimbólumok világos sárga,
background: url (mybutton.png); - akkor azt mondjuk, hogy meg kell venni a legfontosabb fájl - mybutton.png és használja, mint a háttér. A legfontosabb dolog, megfelelően be az elérési utat a képet. Ebben az esetben a kép található ugyanabban a mappában az oldalt.
display: block; - kimenet egy tag blokk (téglalap)
szélesség: 140px; - szélessége 140 képpont blokk,
line-height: 24 képpont; - a magassága a szöveg a 24. sorban a pixel. Ez a bejegyzés hatására a gomb címke pontosan középre (függőlegesen)
magasság: 24px; - a magassága a design (egység)
Az utolsó két sor van szükség, hogy fenntartsák a cross-browser CSS fájlt, és bennük az a magasság 24 képpont lesz látható, csak a felső része a kép.
A második rész a felvétel is, és rájön, maga a kép kapcsolási mechanizmust. Mi csak azt mondja a böngészőnek, hogy, ha lebeg a link fölé, zárt egy címke gombra osztályban. A háttérben megjelenítendő kép, kezdve a 24 képpont. Így a képernyőn megjelenik az alsó fele a kép az aktív gombok, hogy valóban szükségünk van.
gombot: hover <- имя-идентификатор класса стиля, который модифицирует все, что находится внутри тега A, при наведении на него курсора мыши,
background-position: 0px -24px; - ebből egy háttérképet, onnan a felső szélén 24 képpont,
text-decoration: none; - a szöveg jelenik meg anélkül, hogy a aláhúzás,
szín: #FFFFCC; - a színe a szimbólumok világos sárga,
Most betölteni az oldalt a böngészőben, és nézze meg az eredményt. Ha mindent helyesen, a gomb jelenjen meg az oldalon.
Ahhoz, hogy a menü ezen gombok egyszerűen csatolja az oldalról, miután a sor
Az alábbi html kódot:
És a végén kapunk egy menüt egy dinamikusan változó gombok: