javascript image overlay sur un div spécifié

Question

Je suis nouveau sur javascript. très nouveau en fait, cela devrait être mon premier script. quelqu'un peut-il m'expliquer comment faire une superposition transparente sur toute région de largeur fixe spécifiée, disons 700x300px.

Answer 1

Vous pouvez définir la superposition tels que

<div id="myoverlay" class="myoverlay">...contents...</div> 

et définir les dimensions et la position et z-index, etc ... en CSS

.myoverlay { 
    position: absolute; 
    display: none; 
    ... 
} 

je ne vois pas tout à fait la nécessité de JavaScript pour l'instant, mais je suppose que vous voulez utiliser JS pour activer/désactiver l'attribut d'affichage de la superposition.

<script type="text/javascript"> 
function showOverlay(){ 
    document.getElementById("myoverlay").style.display = "block"; 
} 
</script> 

Est-ce à peu près ce que vous recherchez? Désolé pour les erreurs de syntaxe involontaires, car c'est un code non testé purement sur le dessus de ma tête. Juste pour vous donner une idée.

Answer 2

Vous pouvez créer un div avec transparence et le positionner absolument sur la zone spécifiée.

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; 

Pour les navigateurs non IE définir l'opacité:

shimDiv.style.opacity = '0.75'; 

Comme IE ne supporte pas nativement la transparence, vous devez utiliser le filtre comme ceci:

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

Et d'ajouter cette nouvelle div la fin du corps du document:

document.body.appendChild(shimDiv); 

Pour prendre en charge les anciennes versions d'IE, vous devez placer l'élément IFrame sous votre DIV transparent.

Pour créer IFrame dynamiquement à partir de JavaScript essayez le code suivant:

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

Ne pas oublier de mettre l'attribut iframe src avec inutile « javascript: false » déclaration pour empêcher IFrame d'essayer de charger la page (qui vous ne le remarquerez pas, mais ce sera la cause du déclenchement du message "Articles non sécurisés" si vous l'utilisez sur une page HTTPS).

Positionnez ce IFrame sous la div en lui donnant une valeur de propriété d'index z inférieure.

iframe.style.zIndex = 2; 

Tout le style peut être fait avec CSS. Je voulais juste montrer comment cela s'est fait avec JavaScript.