Bun venit pe Forumul Andrei

Daca vezi aceasta pagina inseamna ca nu ai cont sau nu esti logat.
Daca doresti doar sa vizualizezi forumul poti apasa pe "x-ul" din dreapta si acesta imagine nu va mai fi afisata.

Pentru o vizualizare cat mai buna a acestui forum recomandam
8
Va uram o zi buna in continuare si o navigare cat mai placuta pe acest forum !


   
AcasaSustineFAQInregistrareConectareCautareCalendar
Twitter



Ceas personalizat

Navigare :: Scripturi si tutoriale :: Scripturi
AutorMesaj
 Motanel
avatar
Rang: Prieten

Respetarea regulilor 100%

MesajSubiect: Ceas personalizat Mar Dec 08, 2009 6:37 am  
Stiu ca te-ai saturat de ceasurile flash de pe net ce contin link de redirectionare catre site-ul de unde l-ai luat. Stiu ca uneori ai dorinta de a edita designul asa cum tu doresti, insa se pare ca nu prea ai reusit nimic din toate astea.
Dar daca ti-as spune ca acest lucru este acum posibil, editarea dupa bunul plac, designul tu ti-l faci, adio flash si reclama la alte site-uri, oare mai crede ? Ar fi bine sa crezi.

Daca ai sa citesti si ai sa acorzi atentie la ce am scris mai jos vei putea realiza si tu un ceas de pus pe site, blog sau forum.

Uite aici am un exemplu pentru tine sa intelegi la ce ma refer click pe mica lupa: [Trebuie sa fiti inscris si conectat pentru a vedea acest link].

Bun, acum hai sa incepem.


Pentru inceput ai nevoie de 13 imagini, aceste imagini sunt numerele de la ceas, cele doua puncte ce despart orele de minute si minutele de secunde si imaginile ce indica ameaza si dupa-ameaza. Nu conteaza cum le denumesti, dar ca-sa nu te incurci ar fi bine sa le denumesti in felul urator:

Uite un exemplu mai jos, deasupra este denumirea iar jos imaginea.

Denumirec0c1c2c3c4c5c6c7c8c9camcpmcolon
Imagini

Poti face orice fel de numere vrei tu, orice marime, orice model, orice font insa sa fie format png cu background transparent si sa numesti imaginile c0, c1, c2 si asa mai departe.

Dupa ce ti-ai facut numerele dorite (imaginile), deschide un text document pe desktop dand click dreapta apoi new si selectezi din meniu text document
Exemplu:


Acum copie acest cod de mai jos si dai paste in acel text document
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.png", "c1.png", "c2.png", "c3.png", "c4.png", "c5.png", "c6.png", "c7.png", "c8.png", "c9.png", "cam.png", "cpm.png", "colon.png"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}

imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}

imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}

imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML

}

Dupa ce ai pus cod-ul uploadeaza imaginile facute de tine pe un site de hosting gratuit cum e: [Trebuie sa fiti inscris si conectat pentru a vedea acest link], [Trebuie sa fiti inscris si conectat pentru a vedea acest link] sau orice alt site de hosting.
 Motanel
avatar
Rang: Prieten

Respetarea regulilor 100%

MesajSubiect: Re: Ceas personalizat Mar Dec 08, 2009 6:38 am  
Iar dupa ce ai uploadat imaginile inlocuieste in cod unde scrie c0.png, c1.png, c2.png pana la colon.png cu link-ul imagini uploadate.
Mai jos ai o imagine in care este colorat in cod ce trebuie inlocuit


Dupa ce ai inlocuit imaginile cu link-ul in cod-ul pe care tu l-ai pus intr-un text doument, mergi la text document sus la File apoi la save as:


Si salveaza cu extensia .js
Exemplu:


Acum fa alt text document si copie acest cod acolo si salveaza la fel cu extensia .js

new imageclock.display()

Acum trebuie sa ai 2 documente js (javascript), intr-unul ai cod-ul lung si intr-unul cel scurt


Uplodeaza documentele js pe rand pe un site de hosting gratuit.
Poti uploada pe acest site: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Dupa ce ai uploadat documentele trece link-ul in aceste cod-uri:
Cod:
<script type='text/javascript' src='link document 1 cod lung'></script>
si

Cod:
<script type='text/javascript' src='link document 2 cod scurt'></script>

Exemplu cum trebuiesc incolcuite:
Cod:
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152716.js'></script>
si

Cod:
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152743.js'></script>


Acum ca ai aceste 2 mici coduri
Cod:
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152716.js'></script>
<script type='text/javascript' src='http://pmsc.free.fr/gb/J/09128152743.js'></script>

Le pui unde doresti tu sa fie afisat ceasul.

Daca doresti o imagine de fundal sa pui la ceas, aceste 2 coduri trebuie puse intr-un tabel
Exemplu:
<table border="0" align="center">
<tr>
<td background="LINK Imagine de fundal" align='center">
cele 2 coduri aici
</td>
</tr>
</table>


Si pui acest cod cu tot cu tabel unde doresti tu, in orice pagina html, pe blog, forum, sau site
 George130
avatar
Rang: Prieten

Respetarea regulilor 100%

MesajSubiect: Re: Ceas personalizat Vin Oct 29, 2010 10:31 am  
Foarte frumos tutorial felicitari pentru [Trebuie sa fiti inscris si conectat pentru a vedea acest link] imi plce foarte mult.
 Continut sponsorizat
Rang:


MesajSubiect: Re: Ceas personalizat  

*Scrie romaneste
*Sterg mesajele inutile sau scrise cu CAPS
*Nu fa spam
*Linkurile relevante în context sunt binevenite.

Transferul se face din contul dumnevoastra de Paypal




Copyright © 2008-2014 Forumul Andrei. Toate drepturile rezervate. Termeni si conditii
Aspect creat si codat de Alexandru Miron & Nick

.