login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Overige > Transparantie met opacity

Transparantie met opacity

Auteur: jerone - 18 september 2007 - 17:05 - Gekeurd door: Stijn - Hits: 3852 - Aantal punten: (0 stemmen)



Transparantie d.m.v. opacity is op zich niet valid, maar dit kun je omzeilen met javascript.
Daarbij hebben verschillende browsers en browser-systemen hun eigen methodes om transparantie aan te duiden.

Om aan iedereen zijn wens te voldoen, heb ik 2 soorten scripts gemaakt;
- één waar de opacity wordt gereturned (setReturnOpacity),
- en één waar het element en het aantal procenten moeten aangeven (setOpacity).

Hieronder de verschillende cross-browser scripts.

Dit script heb ik zelf werkend getest in Windows met IE 6 & 7, FF 2, Opera 9, NS 8 & 9, K-Meleon 1.1.2 !

Code:
setReturnOpacity
Zet onderstaande in een javascript script:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function setReturnOpacity(n) {  // set opacity from 0 t/m 100 %
  2. 	return opacity = "filter:alpha(opacity=" + n + ");" + /**IE**/
  3. 	"filter: progid:DXImageTransform.Microsoft.Alpha(opacity=" + n + ");" + /**IE old**/
  4. 	"opacity:" + (n/100) + ";" + /**CSS3**/
  5. 	"-moz-opacity:" + (n/100) + ";" + /**Mozilla**/
  6. 	"-khtml-opacity:" + (n/100) + ";"; /**KHTML**/
  7. }

En roep bovenstaande functie aan met:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. setReturnOpacity(70)

Waar '70' het aantal procenten transparantie is.

Voorbeeld:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('testDiv').style.cssText = $setReturnOpacity(30);


Gecomprimeerd: (alleen voor diegene die dit nodig hebben)
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function setReturnOpacity(n){return opacity="filter:alpha(opacity="+n+");"+/**IE**/"filter:progid:DXImageTransform.Microsoft.Alpha(opacity="+n+");"+/**IE old**/"opacity:"+(n/100)+";"+/**CSS3**/"-moz-opacity:"+(n/100)+";"+/**Mozilla**/"-khtml-opacity:"+(n/100)+";";/**KHTML**/}


setOpacity
Zet onderstaande in een javascript script:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function setOpacity(obj,n) {
  2. 	obj.style.opacity = (n / 100); /**CSS3**/
  3. 	obj.style.MozOpacity = (n / 100); /**Mozilla**/
  4. 	obj.style.KhtmlOpacity = (n / 100); /**KHTML**/
  5. 	obj.style.filter = "alpha(opacity=" + n + ")"; /**IE**/
  6. 	obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + n + ")"; /**IE old**/
  7. }

En roep bovenstaande functie aan met:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. setOpacity(obj,70)

Waar 'obj' naar een element wordt verwezen, en '70' het aantal procenten transparantie is.

Voorbeeld:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var obj = document.getElementById('testDiv');
  2. setOpacity(obj,70)


Gecomprimeerd: (alleen voor diegene die dit nodig hebben)
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function setOpacity(obj,n){var obj=obj.style;obj.opacity=(n/100);/**CSS3**/obj.MozOpacity=(n/100);/**Mozilla**/obj.KhtmlOpacity=(n/100);/**KHTML**/obj.filter="alpha(opacity="+n+")";/**IE**/obj.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+n+")";/**IE old**/}


Veel plezier, gr JDownload code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (2)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.033s