Sweet Emotions
Every word we as humans speak is emotionally charged. Except in online communities because you have no vocal tone, facial expression, body language, etc. The more context you can give, the more emotion is correctly conveyed. A small article may have to rely on punctuation and typeface alone to help convey emotion. A larger body of text such as a novel can convey emotion by describing the surroundings and reactions to words; or simply tell you what the emotions are outright. In online communities such as this discussion forum, we don’t have that luxury.
Or at least, people traditionally don’t take it (the luxury). I mean, what would you think of one’s sanity if they began posting:
Well I wouldn’t expect that you would try that, he said sarcastically, elevating his right eyebrow ridiculously high on his forehead.
Instead of crazy third person exposition, sometime around 1981, people began conveying the subtleties of human emotion with written text in online communities by using little glyphs. This of course grew into the emoticon / smiley phenomenon.
Well I wouldn’t expect that you would try that.
And for the most part, this works well. Except most smileys don’t work well across multiple background colors. Ok, they still work fine, but they’re ugly. You may have noticed this if, say, you are using the “Blue” forum theme included with the Discussion Forum module.
Why? Smileys are traditionally distributed in an image format with a fixed-color background, or using binary transparency, which has to have a matte color specified. Yes, you can find some emoticon sets that give the the original source files that have alpha transparency, but most people end up saving them with binary transparency for the web with their intended background color.
You can of course keep the alpha transparency and allow your smileys to work on any background, if you use PNG-24. However, Internet Explorer takes a little Javascript legwork, or it will not render the alpha transparency. You may have noticed that in ExpressionEngine 1.5.1, there’s an icon in the Control Panel page header that works on any background, even in Internet Explorer, thanks to this solution from Bob Osola.
<!--[if lt IE 7]>
<script language="JavaScript">
/*
/* Fix for PNG alpha transparency for Internet Explorer
/* Solution courtesy Bob Osola
/* http://homepage.ntlworld.com/bobosola/index.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);
</script>
<![endif]-->
So what if we applied this to ExpressionEngine’s smileys? What if you include this Javascript in your templates? What if you had a fresh, new, chipper emoticon pack that was ready to drop in and replace your existing emoticons that would work on any background? If only… 
