[DHTML] Cross Browser Image Fader

**jscheuer1** · 07-12-2007, 08:39 PM

Try Opera then. It is a very nice browser, and may well not have the problem that you are having in FF:

http://www.opera.com/

**packdragon** · 06-27-2008, 06:57 PM

This is a great script, nice and flexible. Works like a charm in Firefox, however it doesn't seem to work in IE7. Your sample page works in IE7, however it is fading itself when you roll on it. I need it to fade when you roll on another object. When I altered your code to have a link fade the image, it works great in Firefox, but IE7 says, " 'undefined' is null or not an object".

My code below is a text only version, which works in FF but IE7 doesn't even produce an error this time. Changing the doctype to strict didn't help either.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript">

/* Cross Browser Image Fader © 2007 John Davenport Scheuer
   This comment must remain for Legal Use  */

var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex:  faders[x]=['image_id', initial_opacity];
faders[0]=['test1', 50];
faders[1]=['test2', 10];

////////////// Stop Editing //////////////

function fade(el, way, op, opinc, speed){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id, el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1, speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
}
if(document.documentElement&&document.documentElement.style){
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.d.filters)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++)
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';\n}\n');
document.write('<\/style>\n')
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
</script>


<style type="text/css">

a.selected {
	font-weight: bold;
}

a.notselected {
	font-weight: normal;
}

#home, #link2 {
	background-color: #8abc66
}

</style>

</head>

<body>
<div id="headercontent">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td onmouseover="fade('test1', 'in');" onmouseout="fade('test1', 'out');"><a href="" class="selected">Home</a></td>
            <td onmouseover="fade('test2', 'in');" onmouseout="fade('test2', 'out');"><a href="" class="notselected">Link 2</a></td>
            <td><a href="" id="link3" class="notselected">Link 3</a></td>
            <td><a href="" id="link4" class="notselected">Link 4</a></td>
        </tr>
    </table>
    <div id="test1">TESTING SUBMENU #1</div>
    <div id="test2">TESTING SUBMENU #2</div>

</div>

</body>
</html>

Any suggestions would be greatly appreciated!

**jscheuer1** · 06-28-2008, 03:39 AM

Simple answer - Use images. The script is titled:

Cross Browser Image Fader

Complicated answer -

Part One:

IE will not apply filters in most cases unless the element has 'layout'. I'm not really sure what that means, but you can find out in the MS Knowledge Base:

http://msdn.microsoft.com/en-us/libr...13(VS.85).aspx

Basically it means that the element needs width, or height, or zoom, or absolute position, it floats, or is a table, or is inline-block.

But there are subtleties involved sometimes. However, all images qualify.

Part Two:

In IE 6, text with a filter will appear without Clear Type anti-aliasing unless its element has background (not a requirement in IE 5.5).

In IE 7 however, even with a background, filtered text loses its anti-aliasing quality. Opera does the same thing (as it applies to faded text, even at 100% opacity) basically, even though it doesn't use filters, and its anti-aliasing isn't called Clear Type.

Since all other text on a page in IE 7 (or Opera) generally uses Clear Type (IE only) anti-aliasing (both), filtered/faded text looks bad. You can often work around this by filtering an element as a mask superimposed over the text, but then instead of fading it in, you fade it out to reveal the text beneath.

Bottom line: Use the script as it is intended, for images.

**packdragon** · 06-28-2008, 03:46 PM

I see, I appreciate the explanation. Guess I was trying to be too clever, heh. Thanks for your time.

Thread: [DHTML] Cross Browser Image Fader

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions