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.
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li><dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility#id {
visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus document.getElementById("id").onclick = function(){
alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUESTif(isset($_REQUEST["id"])) {
echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe pathI believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminacióncreer = a crede; camino = cale /drum; iluminación = iluminare