Efect flash-border

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:

1. Fiecare element trebuie sa contina in eticheta lui HTML urmatoarele 2 atribute class="flashgr" si id="flashnr", 'nr' fiind indicele numeric.
2. Primul element trebuie sa aibe id="flash1", al doilea id="flash2", al treilea id="flash3", si tot asa ...

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>

<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>

#id {
  color: #0110fb;
}

var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);

$var = 8;
if($var == 8) echo $var;

Now, it is here.
- Acum este aici.

Yo me divierto.
- Eu ma distrez.