|
Skrypty dla każdego
Każdy webmaster
stara się uatrakcyjnić swoją stronę. W tym tekście zaprezentuję kilka prostych
skryptów, które napewno wam w tym pomogą.
1. Przycisk WSTECZ
Umieszczony na stronie link będzie działał tak samo, jak przycisk Wstecz w przeglądarce. Kod takiego hiperłącza prezentuje się następująco:
<a href="javascript:history.back()">Wstecz</a>
lub
<a href="javascript:history.go(-1)">Wstecz</a>
2. Przycisk DALEJ
Umieszczony na stronie link będzie działał tak samo, jak przycisk Dalej w przeglądarce. Kod takiego hiperłącza prezentuje się następująco:
<a href="javascript:history.forward()>Dalej</a>
lub
<a href="javascript:history.go(+1)>Dalej</a>
3. Odświeżanie i zamykanie witryny
W JavaScript można stworzyć skrypty umożliwiające odświeżanie zawartości strony oraz zamknięcie okna przeglądarki. Oto kod:
<a href="javascript:location.reload">Odśwież</a>
oraz
<a href="javascript:window.close()">Zamknij</a>
4. Otwieranie strony w fullscreen
Aby otworzyć stronę internetową w pełnym oknie należy umieścić znaczniki:
<a href="javascript:window.open('plik.html', 'Test','fullscreen=1')>Fullscreen</a>
5. Tworzenie strony startowej
Ustawienie twojej witryny jako startowej w przeglądarce internauty umożliwi następujący kod:
<A HREF="#" onClick="this.style.behavior='url (#default#homepage)';this.setHomePage ('www.mojastrona.pl');">Ustaw jako startową</a>
6. Dodawanie do listy Ulubionych
Za pomocą JavaScript można umieścić na stronie link dający internautom możliwość szybkiego dodania witryny do Ulubionych:
<script language="JavaScript1.2">
function ulubione(){ window.external.addFavorite('http:// mojastrona.pl','Mojastrona.Peel') } if (document.all) document.write('<a href="#" onClick="ulubione()">Dodaj Mojastrona.pl do ulubionych!</a>')
</script>
7. Informacja o ostatniej modyfikacji strony
Jeżeli często aktualizujesz witrynę na pewno przyda ci się skrypt, który sam wygeneruje czas ostatniej modyfikacji:
<script language="JavaScript">
<!-- document.write("Ostatnia modyfikacja: " + document.lastModified);
//-->
</script>
8. Przycisk e-mailowy
Umieszczony na stronie przycisk e-mailowy ułatwi internautom wysyłanie poczty do autora witryny:
<FORM>
<INPUT TYPE="button" VALUE="E-mail autora" onClick = "parent.location.href = 'mailto:ja@ja.pl'">
</FORM>
9. Wyślij adres znajomemu
Aby spopularyzować witrynę warto umieścić na niej link pozwalający odwiedzającym wysłać jej adres innym internautom:
<A HREF="javascript:location.href='mailto:?SUBJECT=' + document.title + '&BODY=' + escape(location.href)">Powiadom znajomego!</A>
10. Efekt MouseOver
Efekt MouseOver powoduje zmianę grafiki po najechaniu na link kursorem myszy. Efekt taki można osiągnąć różnymi sposobami. Najprostszy prezentuje się następująco:
<a href="http://link1.pl" onMouseOver='mo.src="1.jpg"' onMouseOut='mo.src="2.jpg"'><img src="2.jpg" name="mo"></a>
11. Alert przy ładowaniu strony
Jeżeli chcesz mieć pewność, że odwiedzający twoją witrynę przeczytają jakąś informacje to umieść w znaczniku <body> następujący kod:
OnLoad="alert('TEXT\n');"
12. Drukowanie witryny
Możliwość szybkiego wydrukowania zawartości witryny da odwiedzającym następujący kod:
<script>
<!--
function drukuj()
{ if (!window.print){
alert("Wymagany IE lub NN")
return
}
window.print() }
//-->
</script>
13. Adres strony
Poniższy kod spowoduje wyświetlenie się adresu witryny, którą przegląda internauta:
<script language="JavaScript">
<!--
document.write("Przeglądasz właśnie witryne o adresie " + document.location);
// -->
</script>
14. Wersja przeglądarki
Chyba nie ma internauty, który nie wie, jakiej przeglądarki używa. Jednak aby ułatwić życie tym "wyjątkowym" warto umieścić na stronie następujące znaczniki:
<script language="JavaScript">
<!--
document.write("Twoja przeglądarka:" + navigator.appName + " " + navigator.appVersion);
// -->
</script>
15. Przejście do góry strony
Na zakończenie kod skryptu, który wstawi link służący do szybkiego przechodzenia "na górę" witryny:
<a href="javascript:window.scroll(0,0);">Do góry!</a>
16. Okienko pożegnalne
Skrypt wyświetla okienko, gdy czytelnik opuszcza naszą stronę.
<body onunload="window.open('byebye1.htm','pożegnanie','height=200,width=300')">
Okienko byebye1.htm zawiera "pożegnalny" komunikat.
Gadżety dla każdego
Niżej kilka skryptów JS, DHTML itp., które z pewnością
urozmaicą Twoją witrynę i wyróżnią ją spośród innych zwykłych stron
internetowych.
1. Blokada prawego klawisza myszki
Wielu ludzi męczy się z tym jak zablokować prawy klik myszki
wymyślając przeróżne skrypty, a wystarczy poniższy kawałek tekstu wstawić między
znaczniki body i już... klikamy prawym klawiszem myszki i nic :-)
oncontextmenu="return false"
2. Brak możliwości zaznaczania
To zdarzenie jest bardzo fajne i ciekawe, a w połączeniu z
wyżej wymienioną blokadą prawego klawisza myszki daje ochronę danych na naszej
stronie. Nie pozwala ono zaznaczyć nic na naszej stronie, a więc żaden tekst nie
zostanie bezczelnie skopiowany
onselectstart="return false"
Wstawia się go również w znacznik body.
3. Glow
Glow, czyli poświata (takie jakby obrysowanie dookoła każdej
literki) - to również bardzo proste i efektowne ozdobienie tekstu na stronie.
Robi się to tak:
<p style="filter: glow(color=green, strength=2); width:
100%">Przykład</p>
Teraz trochę wyjaśnień:
po "color=" trzeba wstawić nazwę koloru (np. green, red, yellow)
po "strength=" ustawiamy wielkość poświaty (w przykładzie jest ustawiony na 2)
Uwaga! Powyższy przykład odniesie zamierzony efekt tylko w Internet
Explorerze, ponieważ wykorzystuje filtry DirectX
4. Blur
Blur - kolejny efekt tekstu - jest to rozmycie poziome tekstu.
<p style="filter: blur(strength=10); width=100%">Przykład</p>
Uwaga! Ten efekt również będzie widoczny tylko w IE
5. Generowanie strony w x sekund
Chciałbyś mieć na swojej stronie taki bajer, który wyświetla w
ile sekund strona się załadowała? Nie ma problemu - i nie musisz mieć PHP,
wystarczy odpowiedni skrypt w JavaScript.
Między znacznikami head musisz wkleić taki skrypt:
<script type="text/javascript" language="javascript">
<!--
var startTime = new Date();
startTime = startTime.getTime();
function doneLoading() {
var stopTime = new Date();
stopTime = stopTime.getTime();
document.form1.loading_time.value = ((stopTime - startTime) / 1000)
+ " sekund";
}
//-->
</script>
A miedzy znacznik body wstawiasz tą linijkę tekstu:
<body onload="doneLoading();">
W miejscu w którym chcesz umieścić tekst wstawiasz taką formułkę:
<form name="form1">
Strona załadowana w <input type="text" name="loading_time">
</form>
6. Pole input z obrazkiem w tle
Jeśli chciałbyś mieć jakiś obrazek w tle pola input (np.
animowany GIF) to nie ma problemu. Po prostu wpisujesz tak:
<input style="background-image: url('obrazek.gif');
background-repeat:
repeat">
Gdzie obrazek.gif to ścieżka do pliku Twojego obrazka.
7. Własny kursor na strone WWW
Jeśli znudził Ci się standardowy kursor Windowsa to możesz go
zmienić i wstawić własny na swoją stronę WWW. Wystarczy trochę pokombinować i
będziesz się cieszyć nowym, ciekawym urozmaiceniem Twojej witryny.
Między znaczniki head wstawiasz:
<style type="text/css">
body {
cursor: url('sciezka/kursor.cur');
}
</style>
8. Wypunktowanie z użyciem grafiki
Wypunktowanie z pewnością uatrakcyjni Twoją witrynę.
Wstawiasz taki tekst w znacznik ul:
style="list-style-image: url(obrazek.gif)"
Przykład:
<ul style="list-style-image: url(obrazek.gif)">
<li> jeden </li>
<li> dwa </li>
</ul>
 D.F.
|
