AcasaAcasa   Facebook Facebook  PublicatiiPublicatii  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  
Cautare
 
 

Rezultate pe:
 

 


Rechercher Cautare avansata
[D.F] Panou de control
PROFIL
Informatii
Preferinte
Semnatura
Avatar
SOCIAL
Administrare prieteni
Membrii forumului
Grupuri de utilizatori
MESAJE PRIVATE
Mesaje primite
Mesaje trimise
Arhiva
Subiecte monitorizate
SUBIECTE MONITORIZATE

Team Online

Distribuiţi | 
સollﻻfart OnlineOffline
Evidentiere Imagini la Click
la data de Dum Ian 10, 2016 10:42 am
Multumesc Citeaza Editeaza Sterge Info
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:
Cod:
<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: http://www.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 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 .
Sus In josVezi profilul utilizatorului
ACAB. OnlineOffline
Re: Evidentiere Imagini la Click
la data de Dum Ian 31, 2016 12:09 am
Multumesc Citeaza Editeaza Sterge Info
bunicica
Sus In josVezi profilul utilizatorului
 
Evidentiere Imagini la Click
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1