[IE] transparante png
Ik wil graag mijn png transparant hebben in IE
het deel waar het plaatje moet komen:
Code (php)
1
<td colspan="4" style="padding: 15px; padding-bottom: 0px;" background="img/bg_2.png">
en een javascriptje wat zou meoten werken volgens http://homepage.ntlworld.com/bobosola/
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
Maar er gebeurd niks, het plaatje blijft zo'n lelijke achtergrond houden...
edit:
de / vergeten in de code tag
Gewijzigd op 01/01/1970 01:00:00 door PHP Newbie
width: 300px;
margin: 0 50px;
background-color: #fff;
border: 2px solid black;
filter:alpha(opacity=50); /* voor ie transparant*/
opacity: 0.5; /* Voor CSS standaard*/
-moz-opacity:0.5; /* Voor mozilla*/
}
edit: geen trouwens net een topic over:
http://www.phphulp.nl/forum/showtopic.php?cat=4&id=16904&lasttopic=1
Gewijzigd op 01/01/1970 01:00:00 door Kalle P
een voorbeeldje staat op www.chess-web.nl.tp (béta fase)
ik zal het andere topic is gaan lezen
edit:
*zucht*
Forum niet toegankelijk
Dit forum is niet toegankelijk voor jou. Dit omdat je niet de juiste rechten hebt om dit onderdeel van het forum te bekijken.
Gewijzigd op 01/01/1970 01:00:00 door PHP Newbie
maar daar staat niks over een transparante png
Een hele andere oplossing mag ook i.p.v. mijn script aanpassen, als de png maar transparant is ^_^
http://www.nvmac.nl/new
dat is allemaal png
is met javascript gedaan
die heb ik van:
http://koivi.com/ie-png-transparency/
lees wel ff de artikelen eronder want er zitten wat haken en ogen aan het gebruik. ik heb de meeste opgelost...
Kalle:
#transblok {
width: 300px;
margin: 0 50px;
background-color: #fff;
border: 2px solid black;
filter:alpha(opacity=50); /* voor ie transparant*/
opacity: 0.5; /* Voor CSS standaard*/
-moz-opacity:0.5; /* Voor mozilla*/
}
edit: geen trouwens net een topic over:
http://www.phphulp.nl/forum/showtopic.php?cat=4&id=16904&lasttopic=1
width: 300px;
margin: 0 50px;
background-color: #fff;
border: 2px solid black;
filter:alpha(opacity=50); /* voor ie transparant*/
opacity: 0.5; /* Voor CSS standaard*/
-moz-opacity:0.5; /* Voor mozilla*/
}
edit: geen trouwens net een topic over:
http://www.phphulp.nl/forum/showtopic.php?cat=4&id=16904&lasttopic=1
zo kan je dit topic wel zien:
http://www.phphulp.nl/forum/showtopic.php?cat=5&id=16904&lasttopic=1
GR. mebus! kweet niet of je er nu wat aan hebt!
wat je hierboven doet is het plaatje op een alpha kanaal van 50% gooien (even afgezien van precieze bedoeling van de starter van het topic). het toffe van png is dat er 32 alpha kanalen inzitten. dit weltranspartant en nietransparant en 32 vormen daartussen. die kun je dan gebruiken voor dingen als glow (ja ook daar is een filter voor.)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php ob_start(); ?>
...
<tr>
<td colspan="4" style="padding: 15px; padding-bottom: 0px;" background="img/bg_2.png">
<div id="Stil2" class="Stil2"> </div> </td>
</tr>
...
<?php
include_once 'png.php';
echo replacePngTags(ob_get_clean());
?>
...
<tr>
<td colspan="4" style="padding: 15px; padding-bottom: 0px;" background="img/bg_2.png">
<div id="Stil2" class="Stil2"> </div> </td>
</tr>
...
<?php
include_once 'png.php';
echo replacePngTags(ob_get_clean());
?>
en png.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<?php
/**
copyright info e.d.
*/
function replacePngTags($x,$img_path='',$sizeMeth='scale',$inScript=FALSE){
$arr2=array();
// make sure that we are only replacing for the Windows versions of Internet
// Explorer 5.5+
$msie='/msie\s(5\.[5-9]|[6]\.[0-9]*).*(win)/i';
if( !isset($_SERVER['HTTP_USER_AGENT']) ||
!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
return $x;
if($inScript){
// first, I want to remove all scripts from the page...
$saved_scripts=array();
$placeholders=array();
preg_match_all('`<script[^>]*>(.*)</script>`isU',$x,$scripts);
for($i=0;$i<count($scripts[0]);$i++){
$x=str_replace($scripts[0][$i],'replacePngTags_ScriptTag-'.$i,$x);
$saved_scripts[]=$scripts[0][$i];
$placeholders[]='replacePngTags_ScriptTag-'.$i;
}
}
// find all the png images in backgrounds
preg_match_all('/background-image:\s*url\(([\\"\\\']?)([^\)]+\.png)\1\);/Uis',$x,$background);
for($i=0;$i<count($background[0]);$i++){
// simply replace:
// "background-image: url('image.png');"
// with:
// "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
// enabled=true, sizingMethod=scale, src='image.png');"
// I don't think that the background-repeat styles will work with this...
$x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
', src=\''.$background[2][$i].'\');',$x);
}
// find all the IMG tags with ".png" in them
$pattern='/<(input|img)[^>]*src=([\\"\\\']?)([^>]*\.png)\2[^>]*>/i';
preg_match_all($pattern,$x,$images);
for($num_images=0;$num_images<count($images[0]);$num_images++){
// for each found image pattern
$original=$images[0][$num_images];
$quote=$images[2][$num_images];
$atts=''; $width=0; $height=0; $modified=$original;
// We do this so that we can put our spacer.png image in the same
// directory as the image - if a path wasn't passed to the function
if(empty($img_path)){
$tmp=split('[\\/]',$images[3][$num_images]);
$this_img=array_pop($tmp);
$img_path=join('/',$tmp);
if(empty($img_path)){
// this was a relative URI, image should be in this directory
$tmp=split('[\\/]',$_SERVER['SCRIPT_NAME']);
array_pop($tmp); // trash the script name, we only want the directory name
$img_path=join('/',$tmp).'/';
}else{
$img_path.='/';
}
}else if(substr($img_path,-1)!='/'){
// in case the supplied path didn't end with a /
$img_path.='/';
}
// If the size is defined by styles, find them
preg_match_all(
'/style=([\\"\\\']).*(\s?width:\s?([0-9]+(px|%));).*'.
'(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
// size was defined by styles, get values
$width=$arr2[3][0];
$height=$arr2[6][0];
// remove the width and height from the style
$stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
// Also remove any empty style tags
$modified=preg_replace(
'`style='.$arr2[1][0].$arr2[1][0].'`i',
'',
preg_replace($stripper,'',$modified));
}else{
// size was not defined by styles, get values from attributes
preg_match_all('/width=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$width=$arr2[2][0];
if(is_numeric($width))
$width.='px';
// remove width from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
preg_match_all('/height=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$height=$arr2[2][0];
if(is_numeric($height))
$height.='px';
// remove height from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
}
if($width==0 || $height==0){
// width and height not defined in HTML attributes or css style, try to get
// them from the image itself
// this does not work in all conditions... It is best to define width and
// height in your img tag or with inline styles..
if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images])){
// image is on this filesystem, get width & height
$size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images]);
$width=$size[0].'px';
$height=$size[1].'px';
}else if(file_exists($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images])){
// image is on this filesystem, get width & height
$size=getimagesize($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images]);
$width=$size[0].'px';
$height=$size[1].'px';
}
}
// end quote is already supplied by originial src attribute
$replace_src_with=$quote.$img_path.'spacer.png'.$quote.' style="width: '.$width.
'; height: '.$height.'; filter: progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(src=\''.$images[3][$num_images].'\', sizingMethod='.
$sizeMeth.');"';
// now create the new tag from the old
$new_tag=str_replace($quote.$images[3][$num_images].$quote,$replace_src_with,
str_replace(' ',' ',$modified));
// now place the new tag into the content
$x=str_replace($original,$new_tag,$x);
}
if($inScript){
// before the return, put the script tags back in. (I was having problems when there was
// javascript that had image tags for PNGs in it when using this function...
$x=str_replace($placeholders,$saved_scripts,$x);
}
return $x;
}
?>
/**
copyright info e.d.
*/
function replacePngTags($x,$img_path='',$sizeMeth='scale',$inScript=FALSE){
$arr2=array();
// make sure that we are only replacing for the Windows versions of Internet
// Explorer 5.5+
$msie='/msie\s(5\.[5-9]|[6]\.[0-9]*).*(win)/i';
if( !isset($_SERVER['HTTP_USER_AGENT']) ||
!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
return $x;
if($inScript){
// first, I want to remove all scripts from the page...
$saved_scripts=array();
$placeholders=array();
preg_match_all('`<script[^>]*>(.*)</script>`isU',$x,$scripts);
for($i=0;$i<count($scripts[0]);$i++){
$x=str_replace($scripts[0][$i],'replacePngTags_ScriptTag-'.$i,$x);
$saved_scripts[]=$scripts[0][$i];
$placeholders[]='replacePngTags_ScriptTag-'.$i;
}
}
// find all the png images in backgrounds
preg_match_all('/background-image:\s*url\(([\\"\\\']?)([^\)]+\.png)\1\);/Uis',$x,$background);
for($i=0;$i<count($background[0]);$i++){
// simply replace:
// "background-image: url('image.png');"
// with:
// "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
// enabled=true, sizingMethod=scale, src='image.png');"
// I don't think that the background-repeat styles will work with this...
$x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
', src=\''.$background[2][$i].'\');',$x);
}
// find all the IMG tags with ".png" in them
$pattern='/<(input|img)[^>]*src=([\\"\\\']?)([^>]*\.png)\2[^>]*>/i';
preg_match_all($pattern,$x,$images);
for($num_images=0;$num_images<count($images[0]);$num_images++){
// for each found image pattern
$original=$images[0][$num_images];
$quote=$images[2][$num_images];
$atts=''; $width=0; $height=0; $modified=$original;
// We do this so that we can put our spacer.png image in the same
// directory as the image - if a path wasn't passed to the function
if(empty($img_path)){
$tmp=split('[\\/]',$images[3][$num_images]);
$this_img=array_pop($tmp);
$img_path=join('/',$tmp);
if(empty($img_path)){
// this was a relative URI, image should be in this directory
$tmp=split('[\\/]',$_SERVER['SCRIPT_NAME']);
array_pop($tmp); // trash the script name, we only want the directory name
$img_path=join('/',$tmp).'/';
}else{
$img_path.='/';
}
}else if(substr($img_path,-1)!='/'){
// in case the supplied path didn't end with a /
$img_path.='/';
}
// If the size is defined by styles, find them
preg_match_all(
'/style=([\\"\\\']).*(\s?width:\s?([0-9]+(px|%));).*'.
'(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
// size was defined by styles, get values
$width=$arr2[3][0];
$height=$arr2[6][0];
// remove the width and height from the style
$stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
// Also remove any empty style tags
$modified=preg_replace(
'`style='.$arr2[1][0].$arr2[1][0].'`i',
'',
preg_replace($stripper,'',$modified));
}else{
// size was not defined by styles, get values from attributes
preg_match_all('/width=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$width=$arr2[2][0];
if(is_numeric($width))
$width.='px';
// remove width from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
preg_match_all('/height=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$height=$arr2[2][0];
if(is_numeric($height))
$height.='px';
// remove height from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
}
if($width==0 || $height==0){
// width and height not defined in HTML attributes or css style, try to get
// them from the image itself
// this does not work in all conditions... It is best to define width and
// height in your img tag or with inline styles..
if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images])){
// image is on this filesystem, get width & height
$size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images]);
$width=$size[0].'px';
$height=$size[1].'px';
}else if(file_exists($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images])){
// image is on this filesystem, get width & height
$size=getimagesize($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images]);
$width=$size[0].'px';
$height=$size[1].'px';
}
}
// end quote is already supplied by originial src attribute
$replace_src_with=$quote.$img_path.'spacer.png'.$quote.' style="width: '.$width.
'; height: '.$height.'; filter: progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(src=\''.$images[3][$num_images].'\', sizingMethod='.
$sizeMeth.');"';
// now create the new tag from the old
$new_tag=str_replace($quote.$images[3][$num_images].$quote,$replace_src_with,
str_replace(' ',' ',$modified));
// now place the new tag into the content
$x=str_replace($original,$new_tag,$x);
}
if($inScript){
// before the return, put the script tags back in. (I was having problems when there was
// javascript that had image tags for PNGs in it when using this function...
$x=str_replace($placeholders,$saved_scripts,$x);
}
return $x;
}
?>
maar geeft geen effect dit komt trouwens van: http://koivi.com/ie-png-transparency/
Gewijzigd op 01/01/1970 01:00:00 door PHP Newbie
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* PNG Fix */
/* ------- */
function correctPNG() {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
/* ------- */
function correctPNG() {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
Werkt :)