javascript image overlay over a specified div

Question

i am new at javascript. very new actually, this ought to be my first script. can anyone explain to me how to make a transparent overlay over any specified fixed width regio

Answer 1

You can create a div with transparency and absolutely position it over the specified region.

var shimDiv = document.createElement('div');  
shimDiv.id = 'shim';  
shimDiv.style.position = 'absolute';  
shimDiv.style.top = 0;  
shimDiv.style.left = 0;  
shimDiv.style.width = "700px";  
shimDiv.style.height = "300px";  
shimDiv.style.backgroundColor = '#000'; 
shimDiv.style.zIndex = 3;   

For non IE browsers set opacity:

shimDiv.style.opacity = '0.75'; 

As IE doesn't natively support transparency you should use the filter like this:

shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';  

And add this new div to the end of the document body:

document.body.appendChild(shimDiv); 

To support older IE versions you will have to put IFrame element under your transparent DIV.

To create IFrame dynamically from JavaScript try the following code:

var iframe = document.createElement('iframe');
iframe.setAttribute("src", "javascript:false");

Don't forget to set IFrame src attribute with useless 'javascript:false' statement to prevent IFrame from trying to load the page (which you won't notice it doing, but it will be the cause for tripping the "Unsecured Items" message if you use it on a HTTPS page).

Position this IFrame under the div by giving it a lower z-index property value.

iframe.style.zIndex = 2;

All the styling can be done with CSS. I just wanted to show how it done with JavaScript.