Transparantie met opacity
Auteur: jerone - 18 september 2007 - 17:05 - Gekeurd door: Stijn - Hits: 3863 - 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:
function setReturnOpacity(n) { // set opacity from 0 t/m 100 %
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**/
}
function setReturnOpacity(n) { // set opacity from 0 t/m 100 % 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**/ }
En roep bovenstaande functie aan met:
Waar '70' het aantal procenten transparantie is.
Voorbeeld:
document.getElementById('testDiv').style.cssText = $setReturnOpacity(30);
document.getElementById('testDiv').style.cssText = $setReturnOpacity(30);
Gecomprimeerd: (alleen voor diegene die dit nodig hebben)
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**/}
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:
function setOpacity(obj,n) {
obj.style.opacity = (n / 100); /**CSS3**/
obj.style.MozOpacity = (n / 100); /**Mozilla**/
obj.style.KhtmlOpacity = (n / 100); /**KHTML**/
obj.style.filter = "alpha(opacity=" + n + ")"; /**IE**/
obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + n + ")"; /**IE old**/
}
function setOpacity(obj,n) { obj.style.opacity = (n / 100); /**CSS3**/ obj.style.MozOpacity = (n / 100); /**Mozilla**/ obj.style.KhtmlOpacity = (n / 100); /**KHTML**/ obj.style.filter = "alpha(opacity=" + n + ")"; /**IE**/ obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + n + ")"; /**IE old**/ }
En roep bovenstaande functie aan met:
Waar 'obj' naar een element wordt verwezen, en '70' het aantal procenten transparantie is.
Voorbeeld:
var obj = document.getElementById('testDiv');
setOpacity(obj,70)
var obj = document.getElementById('testDiv'); setOpacity(obj,70)
Gecomprimeerd: (alleen voor diegene die dit nodig hebben)
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**/}
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 J Download code (.txt)
|
|
Stemmen |
Niet ingelogd. |
|