Codul JavaScript prezentat in aceasta pagina poate fi utilizat pentru a evidentia imaginile in pagina web cand utilizatorul /vizitatorul apasa clic pe ele apoi, daca apasa iar pe acea imagine evidentierea e anulata.
- Scriptul adauga stiluri CSS cu JavaScript: "padding", "background", si "border" la imaginea pe care se apasa clic, dupa ce apasa iar pe acea imagine, efectul de evidentiere cu aceste proprietati e sters.

Codul scriptului:
<script type="text/javascript">
// setare proprietati de evidentiere
var imgProp = {
  'padding': '3px',
  'backgroundColor': '#eded01',
  'borderSize': '1ps',
  'borderStyle': 'dashed',
  'borderColor': '#0001fe'
};

// functie pt. evidentiere imagini la clic, de la: https://marplo.net/
function highlightImg() {
  // obtine toate tag-urile <img> si numarul lor
  var allimgs = document.getElementsByTagName('img');
  var nrallimgs = allimgs.length;

  // parcurge elementele <img> si inregistreaza onclick la fiecare
  for(i=0; i<nrallimgs; i++) {
    allimgs[i].onclick=function() {
      // daca borderStyle e deja aplicat, anuleaza 'padding', 'background' si 'border'
      // altfel, aplica proprietatile setate in $imgProp
      if(this.style.borderStyle == imgProp.borderStyle) {
        this.style.padding = 'auto';
        this.style.background = 'none';
        this.style.border = 'none';
      }
      else {
        this.style.padding = imgProp.padding;
        this.style.backgroundColor = imgProp.backgroundColor;
        this.style.borderSize = imgProp.borderSize;
        this.style.borderStyle = imgProp.borderStyle;
        this.style.borderColor = imgProp.borderColor;
      }
    }
  }
}

// apeleaza functia highlightImg() pentru a aplica efectul
highlightImg();
</script>
- In obiectul imgProp puteti defini stilul de evidentiere, proprietatile CSS: "padding", "background", si "border".
- Efectul e pentru toate tag-urile <img> din pagina; daca vreti sa fie aplicat doar la imaginile dintr-un anumit element HTML, inlocuiti codul:
var allimgs = document.getElementsByTagName('img');
Cu aceasta linie de cod ('idelm' este id-ul elementului in care sunt adaugate imaginile).
var allimgs = document.getElementById('idelm').getElementsByTagName('img');
- Scriptul JavaScript trebuie adaugat la sfarsitul documentului HTML, inainte de tag-ul de inchidere </body>.

• Exemplu, clic pe imagini.
Robot     Love     Angel

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tip de <input> creaza un element cu data tip calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Ce proprietate CSS adauga efect de umbre la text?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Clic pe functia care adauga elemente noi la sfarsitul unui array.
pop() shift() push()
var pags = ["lectii", "cursuri"];
pags.push("download", "tutoriale");
alert(pags[2]);            // download
Ce functie aranjeaza un array in ordine crescatoare, dupa chei, mentinand corelatia dintre chei si valori?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
La adjectivul "big" (mare), care este forma de Comparativ (mai mare)?
biggest biger bigger
He is bigger than his sister.
- El este mai mare decat sora lui.
Care este Comparativul adjectivului "grande" (mare)?
menos grande más grande el más grande
Él es más grande que su hermana.
- El este mai mare decat sora lui.
Evidentiere Imagini la Clic

Last accessed pages

  1. Gradele de comparatie: comparative, superlative (22476)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (99720)
  3. Creare si editare pagini HTML (38556)
  4. Curs HTML gratuit Tutoriale HTML5 (62290)
  5. OOP - Constante, Proprietati si Metode Statice (1789)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1736)
  2. Curs HTML gratuit Tutoriale HTML5 (1379)
  3. Curs si Tutoriale JavaScript (1303)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1228)
  5. Curs CSS Online Tutoriale CSS3 (1183)