penguine Posted January 10, 2008 Share Posted January 10, 2008 Hi I have to create transparent shapes(rectangle,circle,etc.Background should be transparent) .Is it possible? Link to comment Share on other sites More sharing options...
justsomeguy Posted January 10, 2008 Share Posted January 10, 2008 Yeah, it's possible. Here's a script to create a PNG with a transparent background and a red border: <?php$image = imagecreatetruecolor(200, 200);$trans_color = imagecolorallocate($image, 0, 0, 0);$color = imagecolorallocate($image, 255, 0, 0);imagecolortransparent($image, $trans_color);imagefill($image, 0, 0, $trans_color);imagerectangle($image, 0, 0, 199, 199, $color);header("Content-type: image/png");imagepng($image);imagedestroy($image);?> I saved that as trans.php and then used this to verify that it's transparent, you can change the background color on the page to test: <html> <head> <title>Trans test</title> <style type="text/css"> body { background-color: blue; } </style> </head> <body> <img src="trans.php"> </body></html> Link to comment Share on other sites More sharing options...
penguine Posted January 11, 2008 Author Share Posted January 11, 2008 Thanks justsomeguy, That's working in ffox exactly as u said.I have three more questions.1)There is a problem with it in ie.How i overcome this?(i am getting black fill)2)I created a function for line. function line(){ $image= imagecreatetruecolor(250,25);$trans_color = imagecolorallocate($image, 0, 0, 0);$color = imagecolorallocate($image, 220, 210, 60);imagecolortransparent($image, $trans_color);imagefill($image, 0, 0, $trans_color); $line_color = imagecolorallocate ($image,220, 210, 60);imageline($image, 40, 0, 240, 0, $line_color);imagepng ($image);imagedestroy($image); } but there is a canvas height more than the height of the line.If i reduce $image= imagecreatetruecolor(250,25); to $image= imagecreatetruecolor(250,10);then there is no line visible.How should i create line exactly as the line thickness?3)how should i make transparent the input type text background from white? Link to comment Share on other sites More sharing options...
justsomeguy Posted January 11, 2008 Share Posted January 11, 2008 IE6 doesn't show PNG transparency correctly. You can use a Javascript file to fix that in IE6, or you can make it a gif instead of a png. I'm not sure what you're asking about the line, that script works like it should for me. You can reduce the height of the canvas all the way down 1 pixel and the line still gets drawn, it's always on the top of the canvas. Link to comment Share on other sites More sharing options...
penguine Posted January 12, 2008 Author Share Posted January 12, 2008 thanks when i change it to gif it pretty well working in both ie and firefox.one more questionhow should i make transparent the input type text background from white(in ie)? Link to comment Share on other sites More sharing options...
Synook Posted January 13, 2008 Share Posted January 13, 2008 how should i make transparent the input type text background from white(in ie)?Make the CSS background-color:transparent; Link to comment Share on other sites More sharing options...
penguine Posted January 14, 2008 Author Share Posted January 14, 2008 background-color:transparent is not working in Internet explorer.background:transparent should be used .thanks Link to comment Share on other sites More sharing options...
real_illusions Posted January 15, 2008 Share Posted January 15, 2008 justsomeguy - any chance you can explain how the code works, like with comments before or on each line telling us non-php clued up type people what its all about? Link to comment Share on other sites More sharing options...
justsomeguy Posted January 15, 2008 Share Posted January 15, 2008 Each line is a built-in function call, check the image function reference on php.net for the functions you have a question about.http://www.php.net/manual/en/ref.image.php Link to comment Share on other sites More sharing options...
real_illusions Posted January 15, 2008 Share Posted January 15, 2008 Ah..ok..thanks:) Link to comment Share on other sites More sharing options...
calvin182 Posted January 20, 2008 Share Posted January 20, 2008 i'm a bit curious, can anyone explain the javascript used to fix the png transparency issue with ie6? i'd like my new site design to be as compatible as possible. Link to comment Share on other sites More sharing options...
Synook Posted January 21, 2008 Share Posted January 21, 2008 It basically enables the PNG alpha-transparency renderer (it is already enabled for all other browsers). This is the code from http://homepage.ntlworld.com/bobosola/pngtestfixed.htm 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); It basically goes through all images (img tags) on the page one by one, then checks whether they are of extension PNG. If it is, it replaces that image tag with a new one, but with an extra style definition which enables the alpha tranasparency filter for that image filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<image source>', sizingMethod='scale'); Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.