| LINKI | |
Chcemy połączyć strony między sobą, jak to zrobić?
Wstawiamy element klikalny, w który trzeba kliknąć myszką, żeby przejść do konkretnego miejsca na stronie, do innej strony w tym samym serwisie, albo do strony innego serwisu. Najprostszym takim elementem jest napis, elementem klikalnym może być również grafika np. zdjęcie, napis w postaci grafiki.
|
| Przykład 1. | |
Link do innych podstron serwisu.
<a href="ksiazka.html">Wpisz się do książki gości</a>
Wygląda to na stronie tak:
Wpisz się do książki gości
Link do podstrony serwisu z katalogu powyżej. Zobacz jak wstawiony jest ukośnik przed nazwą pliku, odwrotnie niż w Windows! Większość serwerów czyta dobrze tylko tak wstawione ukośniki.
<a href="../ksiazka.html">Wpisz się do książki gości</a>
|
| Przykład 2. | |
Link do konkretnego miejsca na tej samej stronie, do tak zwanej kotwicy.
Najpierw wstawiamy na stronie, w części o gwoździach, odpowiednią kotwicę:
<a name="gwozdzie"></a>
Odnośnik do tej kotwicy wygląda następująco:
<a href="#gwozdzie">gwoździe</a>
Na stronie "wyglądało by" to tak:
Zobacz nasze wyroby:<br>
<a href="#gwozdzie">gwoździe</a><br>
<a href="#nity">nity</a>
|
| Przykład 3. | |
Link do innych stron spoza serwisu.
<a href="http://www.miasto.pl/ksiazka.html">Wpisz się do książki gości</a>
Poniższy link otwiera się w nowym czystym oknie przeglądarki ( _blank )
<a href="http://www.miasto.pl/ksiazka.html" target="_blank">Wpisz się do książki gości</a>
Grafika jako link.
<a href="http://www.miasto.pl/ksiazka.html"><img src="../obrazki/przycisk.gif"></a>
|
| Przykład 4. | |
Link do poczty elektronicznej
<a href="mailto:mojapoczta@poczta.onet.pl">Napisz do mnie!</a>
I to samo, tyle że z rysunkiem
<a href="mailto:mojapoczta@poczta.onet.pl"><img src="../obrazki/skrzynka.gif"></a>
|
| Przykład 5. | |
Link do strony - zmieniany przycisk
Bierzemy program graficzny np. GIMP i robimy przyciski zmieniane DODATKI/PRZYCISKI/Zaokrąglane przyciski
Otrzymamy 3 przyciski - proponuję zapisać je w formacie png, bo będą dobrej jakości i małego rozmiaru
Przyciski są rodzaju:
 (b1on.png - wciśnięty)  (b1off.png - nieaktywny)  (b1over.png - pod myszką)
teraz trzeba uaktywnić ten przycisk.
<img src="img/b1off.png" onMouseOver='this.src="img/b1on.png"' onMouseOut='this.src="img/b1off.png"'>
Zdarzenie onMouseOver zamienia ten obrazek (ang. this) na inną grafikę po najechaniu nad obrazek myszką
Zdarzenie onMouseOut zamienia ten obrazek (ang. this) na inną grafikę po wyjechaniu myszką znad obrazka
Tak to działa:
Żeby to był link do strony, to trzeba dodać tekst w html:
<a href="strona2.html"><img src="img/b1off.png" onMouseOver='this.src="img/b1on.png"' onMouseOut='this.src="img/b1off.png"'>
</a>
Tak działa:
|
