Ceas personalizat (fara flash si link-uri inserate)

Dum Ian 24, 2010 2:17 pm

Ceas personalizat (fara flash si link-uri inserate)

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: .

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.

Denumire c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 cam cpm colon
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 preloadimages=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 if (sections[i].length==1)
sections[i]=''+''
else
sections[i]=''+''
}
return sections[0]+''+sections[1]+''+sections[2]
}

imageclock.display=function(){
var clockinstance=this
this.spanid=\"clockspan\"+(imageclock.instances++)
document.write('')
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)+'=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: TinyPic.Com, ImageShack.Com sau orice alt site de hosting.

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: http://pmsc.free.fr/gb/J/upload.php
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:

LINK Imagine de fundal\" align='center\">
cele 2 coduri aici

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

Nota: Echipa Access nu-si asuma raspunderea pentru continutul acestui sfat! Multumim lui Motanel!

[i]Sfat realizat de Motanel
Ceas personalizat (fara flash si link-uri inserate) Vqk4gl

Vin Mar 18, 2011 6:27 am

super tutorialu si explicat foarte bine,bravo

Ceas personalizat (fara flash si link-uri inserate)

Ceas personalizat (fara flash si link-uri inserate)

Re: Ceas personalizat (fara flash si link-uri inserate)