Curs Javascript

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 tag este element de tip bloc?
<div> <img> <span>
<div>Web Programming and Development</div>
Care cod CSS afiseaza textul subliniat?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".
has't played haven't been playing will haven't played
The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.
Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".
habrá contado va a contar contaba
Él no habrá contado el cuento.
- El nu ar fi spus povestea.
Evidentiere Imagini la Clic

Last accessed pages

  1. Afisare si chenare din CSS la elemente HTML (5511)
  2. Creare si editare pagini HTML (83186)
  3. Exercitii engleza - English Tests and exercises - Grammar (110239)
  4. Lectii audio-video de limba engleza (24012)
  5. Sufixele ful, less si nees - Test engleza (4568)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (1478)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1222)
  3. Creare si editare pagini HTML (599)
  4. Coduri pt culori (481)
  5. Titluri, Paragrafe, Un nou rand, Linie orizontala (357)