• O singura imagine pt meniu cu mai multe link-uri

Fiecare imagine care trebuie incarcata in pagina necesita o cerere de la browser catre server si asteptarea raspunsului, astfel, daca aveti un meniu cu 5 link-uri cu imagine, pentru a face ca pagina sa se incarce mai repede, e bine sa folositi un singur fisier cu imagini /butoane , nu 15 fisiere (5 * 3).
Acest tutorial arata cum se poate utiliza o singura imagine si CSS pentru toate cele trei stari ale unui buton /link: normal, hover (mouse-ul deasupra), si active (cand se apasa clic). De asemenea, cum se poate folosi o singura imagine pentru mai multe link-uri intr-un meniu.

Este simplu, ideea este ca desenele butonului pt cele 3 stari sa fie simetric asezate in imagine, vertical: top, center, bottom (sus, centru, jos); sau orizontal: left, center, right (stanga, centru, dreapta). Este indicat ca inaltimea imaginii (sau lungimea, in functie de cum sunt pozitionate butoanele in imagine) sa se imparta exact la 3.
Apoi, in CSS setati proprietatile width si height ale link-ului cu aceeasi valoare ca lungimea si inaltimea butonului desenat in imagine.


• Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate vertical, precum acestea:
image butoane verticale
Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 0, 50%; si 0, 100% (sau: top, center, bottom); pt fiecare conditie (normal, hover, active). Folosind valori in procente, ofera un control mai bun al pozitionarii.
- Iata un exemplu (lungimea imaginii exte 125 pixeli, inaltimea 120 pixeli; cu butoanele desenate vertical. Inaltimea butonului /link-ului este 40px):
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
#addnew {
 width: 125px;
 height: 40px;
 display: block;
 background: url('css/button_img1.gif');
 background-position: 0 0;
 background-repeat: no-repeat;
 border: none;
 text-indent: -9999px; /* Sa nu se afiseze textul din link */
}

/* Cand cursorul de mouse e deasupra butonului */
#addnew:hover {
 background-position: 0 50%;
}

/* Cand butonul /link-ul e apasat */
#addnew:active {
 background-position: 0 100%;
}
</style>
</head>
<body>
<a href="coursesweb.net/" title="Web Programming Courses" id="addnew">CoursesWeb.net</a>
</body>
</html>
Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea "active"):
CoursesWeb.net

• Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate orizontal, precum acestea:
image butoane orizontale
- Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 50% 0; si 100% 0 (sau: left, center, right); pt fiecare conditie (normal, hover, active).
- Iata un exemplu cu butoanele desenate orizontal:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
#addnew {
 width: 125px;
 height: 40px;
 display: block;
 background: url('css/button_img2.gif');
 background-position: 0 0;
 background-repeat: no-repeat;
	text-indent: -9999px; /* Sa nu se afiseze textul din link */
}

/* Cand cursorul de mouse e deasupra butonului */
#addnew:hover {
 background-position: 50% 0;
}

/* Cand butonul /link-ul e apasat */
#addnew:active {
 background-position: 100% 0;
}
</style>
</head>
<body>
<a href="//marplo.net/" title="Cursuri Jocuri Anime" id="addnew">MarPlo.net</a>
</body>
</html>
Rezultat:
MarPlo.net

In mod similar se poate folosi o singura imagine cu butoane pt un meniu cu mai multe link-uri. Trucul este sa desenati butoanele simetric, apoi definiti proprietatea CSS background-position in functie de pozitia butoanelor in imagine, folosind procente ce reprezinta distanta fata de coltul stanga-sus, perechea de valori: stanga, sus (poate fi necesar sa testati mai multe valori pana obtineti afisarea cea mai buna a fiecarui buton).
- Iata un exemplu, Meniu cu 4 link-uri folosind aceasta imagine:
imagine butoane
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
 /* Seteaza imaginea pt butoanele din link-uri si proprietatile comune in #menu */
#menu a {
 width: 125px;
 height: 40px;
 display: block;
 background: url('css/buttons.gif');
 background-repeat: no-repeat;
 text-indent: -9999px; /* Sa nu se afiseze textul din link */
}

 /* Butonul din imagine pt Primul link */
#menu #addnew {
 background-position: 0 0;
}
 /* Primul link hover */
#menu #addnew:hover {
 background-position: 48% 0;
}
 /* Primul link cand e apasat */
#menu #addnew:active {
 background-position: 100% 0;
}

 /* Butonul din imagine pt al Doilea link */
#menu #delete {
 background-position: 0 32%;
}
 /* al Doilea link hover */
#menu #delete:hover {
 background-position: 48% 32%;
}
 /* al Doilea link cand e apasat */
#menu #delete:active {
 background-position: 100% 32%;
}

 /* Butonul din imagine pt al Treilea link */
#menu #accept {
 background-position: 0 66%;
}
 /* al Treilea link hover */
#menu #accept:hover {
 background-position: 48% 66%;
}
 /* al Treilea link cand e apasat */
#menu #accept:active {
 background-position: 100% 66%;
}

 /* Butonul din imagine pt al patrulea link */
#menu #cancel {
 background-position: 0 99%;
}
 /* al patrulea link hover */
#menu #cancel:hover {
 background-position: 48% 99%;
}
 /* al patrulea link cand e apasat */
#menu #cancel:active {
 background-position: 100% 99%;
}
</style>
</head>
<body>
<nav id="menu">
 <a href="#" title="Add New" id="addnew">Add New</a>
 <a href="#" title="Delete" id="delete">Delete</a>
 <a href="#" title="Accept" id="accept">Accept</a>
 <a href="#" title="Cancel" id="cancel">Cancel</a>
</nav>
</body>
</html>
Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea "active"):

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tip de <input> creaza un element cu data tip calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Ce proprietate CSS adauga efect de umbre la text?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Clic pe functia care adauga elemente noi la sfarsitul unui array.
pop() shift() push()
var pags = ["lectii", "cursuri"];
pags.push("download", "tutoriale");
alert(pags[2]);            // download
Ce functie aranjeaza un array in ordine crescatoare, dupa chei, mentinand corelatia dintre chei si valori?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
La adjectivul "big" (mare), care este forma de Comparativ (mai mare)?
biggest biger bigger
He is bigger than his sister.
- El este mai mare decat sora lui.
Care este Comparativul adjectivului "grande" (mare)?
menos grande más grande el más grande
Él es más grande que su hermana.
- El este mai mare decat sora lui.
Butoane pentru link-uri folosind o singura imagine si CSS

Last accessed pages

  1. Ce este Mantuirea (5)
  2. Curs si Tutoriale JavaScript (48416)
  3. Zilele saptamanii, Lunile si Anotimpuri - Exercitii incepatori (4768)
  4. Exercitii engleza - English Tests and exercises - Grammar (43243)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (117661)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (710)
  2. Curs HTML gratuit Tutoriale HTML5 (515)
  3. Curs si Tutoriale JavaScript (476)
  4. Curs si Tutoriale Ajax (439)
  5. Curs CSS Online Tutoriale CSS3 (429)