I've used JavaScript DOM scripting to create a table element and alter
its opacity. Bizarrely, the contents of the table appear to vanish when
the opacity changes.
One important note is that I am using transparent PNGs as background
images of elements within the table. The following CSS is used to style
two elements within the table:
..arrowLeft {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='/core/images/arrow.png',
sizingMethod='crop') }
..arrowRight {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='/core/images/arrowRight.png',
sizingMethod='crop') }
Is the vanishing problem a bug in Internet Explorer? And if so, I'd be
grateful if you could help me find a workaround.
In the example on the URL below, the beige arrows on the photo are the
tables in question, and you will observe their contents vanishing when
you mouse in and out of the photo (which should fade them in and out).
http://testing.chrisbeach.co.uk/core...er.php?ID=6572
Below are snippets of code used to create the tables and their contents
(which form the arrows), and also the code used to alter the opacity:
// Creating the table (arrow) and contents
function Arrow( user, coords )
{
this.user = user;
this.coords = coords;
var objArrowContainer = document.createElement( 'table' );
var objTableBody = document.createElement( 'tbody' );
var objArrowRow = document.createElement( 'tr' );
var objArrowLeft = document.createElement( 'td' );
var objArrowRight = document.createElement( 'td' );
if ( this.user.imageURL )
{
var objIcon = new Image();
objIcon.src = ( this.user.imageURL.substring( 0, 7 ) == 'http://' ) ?
this.user.imageURL : domain + this.user.imageURL;
objArrowLeft.appendChild( objIcon );
}
objArrowLeft.className = 'arrowLeft';
objArrowRight.className = 'arrowRight';
objArrowContainer.className = 'arrowContainer';
objArrowLeft.appendChild( document.createTextNode( this.user.forename
) );
objArrowRight.appendChild( document.createTextNode( " " ) );
objArrowRow.appendChild( objArrowLeft );
objArrowRow.appendChild( objArrowRight );
objTableBody.appendChild( objArrowRow );
objArrowContainer.appendChild( objTableBody );
objArrowContainer.id = this.user.username;
objArrowContainer.onmousedown = function( e )
{
objDragged = objArrowContainer;
docMouseMove( e );
return false;
};
objArrowContainer.style.left = ( coords.x + ARROW_OFFSET.x ) + "px";
objArrowContainer.style.top = ( coords.y + ARROW_OFFSET.y ) + "px";
this.objElement = objArrowContainer;
}
// Altering the opacity
if ( arrowArray[i].objElement.style.MozOpacity != null)
{ arrowArray[i].objElement.style.MozOpacity = arrowAlpha; }
if ( arrowArray[i].objElement.style.opacity != null)
{ arrowArray[i].objElement.style.opacity = arrowAlpha; }
if ( arrowArray[i].objElement.style.filter != null)
{
var ieOpacity = Math.round( arrowAlpha * 100 );
arrowArray[i].objElement.style.filter =
"progid:DXImageTransform.Microsoft.Alpha(opaci ty=" + ieOpacity + ")";
}
