HOME | DD
denghao — Transparency
by-nc-nd
Published: 2007-02-14 20:26:33 +0000 UTC; Views: 14646; Favourites: 52; Downloads: 2787
Redirect to original
Description
How to make the PNG images properly display in IEAn interface design for Adpreference.com. Nothing is really impressive about this site, either design or technique, but one thing I would like to bring out here and share with you all.
In this project which will function as a tool for online advertising to connect Advertisers to Publishers, or in other word to increase the transparency between them. TRANSPARENCY has been brought in this project as the main concept. Therefore, transparent images have to be widely used in this site. However, as we all know, PNG formated images with transparency cannot be displayed properly in IE 6.0 and lower versions. To solve this problem, the following is my solution:
1.Go ahead to finish the interface design, feel free to use any PNG files and make sure the whole page display as you expected in FireFox. Make sure put the CSS in an individual folder called “css”.
2. Create another folder and name it “JS” in the directory where you store the index page and “css” folder.
3. Open a new word file(or any text editor), copy the below text and paste, save it in the “JS” folder with name “pngfix.js”(Strongly recommend you type the extension by you own)
function correctPNG()
{
for(var i=0; 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 = " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter
rogid
XImageTransform.Microsoft.AlphaImageLoader"+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
With this Java Script, PNG files regardless the transparency will display properly when they are inserted as images. But once you set up a transparent png image as the background of a table either by HTML or CSS, all the transparent area will automatically turn to white.
4. Create another CSS file in “CSS” folder, name it “ie_style”. Copy all the css that CONTAIN PNG FILES AS BACKGROUND from the original CSS file into this new CSS. For example, I have a CSS as following:
.main_menu {
background-image:url(../images/topmenu_bg.png);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bolder;
}
Copy this and paste in the “ie_style.css”, replace the:
background-image:url(../images/topmenu_bg.png);
by
background-image:url(images/topmenu_bg.png); filter
rogidXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/topmenu_bg.png') ; position:relative; background:noneSave.
5. Open the Index source code, in the head tag, under
Copy the below code and paste:
Save.
Hope it works on your project too!
Related content
Comments: 16
hey. im find the error
heres the solution:
ie_style
#centro {
background-image:url(images/centro.png); filter
width:670px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-335px;
}
im repeating some codes thats in the base style.css, so thats posssible are making the codes go nuts...
so im change only for this:
ie_style
#centro {
background-image:url(images/centro.png); filter
}
im think its because the ie_style it only for the background line, the other stuff goes directly in the style.css.
tbks a lot.
look the results:
[link]
👍: 0 ⏩: 1
Well, this is a two yeas old post, so there must be a better solution now
Thanks mate.
👍: 0 ⏩: 0
Hey man. thats very cool, but my background isnt working. its still that border... what do i have to do?
im making exactly like describes. but im some how its not working.
my css styles:
style.css
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat;
background-position: center center;
margin: 0px;
}
#centro {
background-image: url(../images/centro.png);
width:670px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-335px;
}
#form {
height: 180px;
width: 350px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -175px;
font-family: "Trebuchet MS";
font-size: small;
color: #666666;
text-align: center;
}
ie_style
#centro {
background-image:url(images/centro.png); filter
width:670px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-335px;
}
the JS script
function correctPNG()
{
for(var i=0; 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 = "+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter
+ "(src=\'" + img.src + "\', sizingMethod='scale'
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
heres the site: [link]
with u can help me i be glad.
btw, tnks a lot
👍: 0 ⏩: 0
gosh, thats gota be a pain in the butt. didn't know ie couldn't do transparencies. guess because i havent used ie for like 3 years now.
👍: 0 ⏩: 0
damn
👍: 0 ⏩: 0
