Contents vanish when changing opacity of table (IE)

C

chris

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.AlphaImageLoader(src='/core/images/arrow.png',
sizingMethod='crop') }
..arrowRight {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(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/scripts/entryViewer.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.objElement.style.MozOpacity != null)
{ arrowArray.objElement.style.MozOpacity = arrowAlpha; }
if ( arrowArray.objElement.style.opacity != null)
{ arrowArray.objElement.style.opacity = arrowAlpha; }
if ( arrowArray.objElement.style.filter != null)
{
var ieOpacity = Math.round( arrowAlpha * 100 );
arrowArray.objElement.style.filter =
"progid:DXImageTransform.Microsoft.Alpha(opacity=" + ieOpacity + ")";
}
 
C

chris

I've just tried adapting the code to add the AlphaImageLoader every
time the opacity changes -- this hasn't worked. The content of the
table still disappears

any suggestions?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,999
Messages
2,570,247
Members
46,844
Latest member
JudyGvh32

Latest Threads

Top