Curs Javascript

Urmatorul script adauga un efect de flash-border obiectelor din pagina HTML (poate fi folosit pentru imagini, cadre <div> sau alte elemente HTML).
Mai jos puteti vedea efectul pentru o imagine si un cadru b<div>.



Eticheta DIV

Pentru a adauga acest script intr-o pagina web:
1. Introduceti in sectiunea HEAD a documentul HTML, urmatorul cod CSS (acesta stabileste marginea initiala peste care va fi aplicat efectul de flash-border):
<style type="text/css">
<!--
.flashgr {
  border:4px solid #abcdef;
}
-->
</style>

2. Daca folositi efectul pentru imagine si pentru DIV, acestea trebuie sa aibe urmatoarea forma
<img src="imgs/img1.jpg" id="flash0" class="flashgr"><br><br>

<div id="flash1" class="flashgr" style="width:250px; height:100px;">Eticheta DIV</div>
- Daca doriti sa folositi acest efect pentru mai multe elemente din pagina, tineti cont de urmatoarele doua lucruri:
3. La sfarsitul documentului HTML, inainte de </body> adaugati urmatorul script
<script type="text/javascript">
<!--
// https://marplo.net
// Scriptul trebuie adaugat la sfarsit, deasupra lui /BODY

// Aici setati culoare pt. flash
var flashcolor="#fe3333"
// setati viteza de flash (mai mic mai repede)
var speed=150

// Matricele pentru fiecare margine si obiect
var margine=new Array()
var increment=0
var flashobj=new Array()

// Adauga efectul fiecarei margini si obiect
// Parcurgand matricele
if (document.all||document.getElementById) {
  while (document.getElementById("flash"+increment)!=null) {
    flashobj[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style")
    margine[increment]=0;
    increment++
  }
}

// Seteaza flash-ul pt. fiecare margine
function flash(obj) {
  if (margine[obj]==1) {
    flashobj[obj].borderLeftColor=flashcolor
    flashobj[obj].borderBottomColor=flashobj[obj].borderRightColor
  }
  else if (margine[obj]==2) {
    flashobj[obj].borderTopColor=flashcolor
    flashobj[obj].borderLeftColor=flashobj[obj].borderBottomColor
  }
  else if (margine[obj]==3) {
    flashobj[obj].borderRightColor=flashcolor
    flashobj[obj].borderTopColor=flashobj[obj].borderLeftColor
  }
  else if (margine[obj]==4) {
    flashobj[obj].borderBottomColor=flashcolor
    flashobj[obj].borderRightColor=flashobj[obj].borderTopColor
  }

if (margine[obj]<=3)
  margine[obj]++
else
  margine[obj]=1
}

// Schimba flash-ul pe cate o margine, successiv
if (document.all||document.getElementById) {
  for (z=0;z<flashobj.length;z++) {
    var temp='setInterval("flash('+z+')",'+speed+')'
    eval(temp)
  }
}
//-->
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Efect flash-border

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (55362)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (126476)
  3. Exercitii engleza - English Tests and exercises - Grammar (45611)
  4. Gramatica limbii engleze - Prezentare Generala (143192)
  5. Curs HTML gratuit Tutoriale HTML5 (83454)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2787)
  2. Curs HTML gratuit Tutoriale HTML5 (1889)
  3. Curs si Tutoriale JavaScript (1786)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1731)
  5. Curs CSS Online Tutoriale CSS3 (1609)