Adaugare scrolling

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Adaugare scrolling

Mesaj Scris de Luky la data de Dum 13 Ian - 3:02

Adaugare scrolling

Bun gasit, La revedere

In acest tutorial va vom explica cum puteti adauga un efect de scrolling pe forumul dumneavoastra. Cu ajutorul acestui scrolling puteti adauga orice doriti (text, imagini, tabele etc.) si face ca aceste obiecte sa se miste dintr-o directie in alta cum doriti. Codurile sunt in format HTML si deci pot fi folosite in Generalitati, Anunturi, pagini HTML, widget-uri personalizate, template-uri si altele.

Numele pentru tag-ul de scroll: marquee

Atribuțiile acestui tag:
id ~> identificatorul tag-ului;
scrolldelay ~> timp im milisecunde intre fiecare mișcare;
scrollamount ~> distanta in pixeli intre fiecare mișcare;
height ~> înălțimea in pixeli a ferestrei cu scroll;
width ~> latimea in pixeli a ferestrei cu scroll;
direction ~> direcția scrolling-ului (up - de jos in sus; down - de sus in jos; left - de la dreapta la stanga; right - de la stanga la dreapta);
behavior ~> comportamentul scroll-ului (alternate - in alternanta; scroll - normal; slide - dintr-o parte in alta);
loop ~> număr de scroll-uri (daca nu este specificat - numarul este infinit).

Varianta 1 - Scrolling implicit:

Un text simplu de scroll:
Cod:
<marquee>Textul dumneavoastra aici</marquee>
Un scrolling simplu cu poze (afisate orizontal):
Cod:
<marquee><img src="Link imagine 1">  
<img src="Link imagine 2">  
<img src="Link imagine 3"></marquee>
Un scrolling simplu cu poze (afisate vertical):
Cod:
<marquee><img src="Link imagine 1"> <br>
<img src="Link imagine 2"> <br>
<img src="Link imagine 3"></marquee>
Scrolling poze cu link-uri:
Cod:
<marquee><a href="Link redirectionare 1"><img src="Link imagine 1"></a>
<a href="Link redirectionare 2"><img src="Link imagine 2"></a>
<a href="Link redirectionare 3"><img src="Link imagine 3"></a></marquee>
Varianta 2 - Scrolling-ul se opreste cand curosrul este adus deasupra continutului:

Un text simplu de scroll:
Cod:
<marquee id="id1"><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">Textul dumneavoastra aici</span></marquee>
Un scrolling simplu cu poze (afisate orizontal):
Cod:
<marquee id="id1"><img src="Link imagine 1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">  
<img src="Link imagine 2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">  
<img src="Link imagine 3" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></marquee>
Scrolling poze cu link-uri:
Cod:
<marquee id="id1"><a href="Link redirectionare 1"><img src="Link imagine 1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></a>
<a href="Link redirectionare 2"><img src="Link imagine 2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></a>
<a href="Link redirectionare 3"><img src="Link imagine 3" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></a></marquee>
Varianta 3 - Scrolling-ul se efectueaza din partea dreapta spre stanga:

Un text simplu de scroll:
Cod:
<marquee direction="left">Textul dumneavoastra aici</marquee>
Un scrolling simplu cu poze (afisate orizontal):
Cod:
<marquee  direction="left"><img src="Link imagine 1">  
<img src="Link imagine 2">  
<img src="Link imagine 3"></marquee>
Un scrolling simplu cu poze (afisate vertical):
Cod:
<marquee direction="left"><img src="Link imagine 1"> <br>
<img src="Link imagine 2"> <br>
<img src="Link imagine 3"></marquee>
Scrolling poze cu link-uri:
Cod:
<marquee direction="left"><a href="Link redirectionare 1"><img src="Link imagine 1"></a>
<a href="Link redirectionare 2"><img src="Link imagine 2"></a>
<a href="Link redirectionare 3"><img src="Link imagine 3"></a></marquee>


Puteti personaliza casuta si textul dupa bunul plac folosind urmatorul cod:
Cod:
style="proprietate: valoare;"
Acest atribut se adauga in interiorul balizei marquee.

Atribute ale stilului:
height: Xpx; ~> inaltimea casutei de scrolling;
width: Xpx; ~> latimea casutei de scrolling;
background-color: #culoare; ~> pentru modificarea culorii de fundal a casutei;
background-image: url(Link imagine); ~> pentru adaugarea unei imagini de fundal;
color: #culoare; ~> pentru schimbarea culorii textului;
font-size: Xpx; ~> pentru schimbarea dimensiunii textului;
text-align: pozitionare; ~> pentru pozitionarea textului (left - stanga; center - centru; right - dreapta).

Pentru mai multe coduri CSS, va invitam sa cititi acest tutorial:
http://help.forumgratuit.ro/t43419-css-ce-este-si-cum-functioneaza
Tutorial scris de SanDream, tradus de Luky si completat de Cassius Dio

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Luky
Membru onorific
Membru onorific

masculin

Mesaje : 3556
Varsta : 28
Localizare : Bucuresti
Data de inscriere : 27/12/2007
Multumiri : 20
Niciun avertisment

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum