наложение изображения javascript на указанный div

Question

Я новичок в JavaScript. очень новый на самом деле, это должен быть мой первый сценарий. Может ли кто-нибудь объяснить мне, как сделать прозрачное наложение на любую заданную область фиксированной ширины, скажем, 700x300px.

Answer 1

Вы можете определить оверлей, например

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

и определить размеры, положение, z-индекс и т. Д. В CSS

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

Я пока не вижу необходимости в JavaScript, но я думаю, вы захотите использовать JS для включения / выключения атрибута отображения наложения.

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

Это примерно то, что вы ищете? Извините за непреднамеренные синтаксические ошибки, потому что это непроверенный код, который у меня в голове. Просто чтобы дать вам идею.

Answer 2

Вы можете создать div с прозрачностью и абсолютно позиционировать его над указанным регионом.

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;   

Для браузеров без IE установите непрозрачность:

shimDiv.style.opacity = '0.75'; 

Поскольку IE изначально не поддерживает прозрачность, вы должны использовать фильтр следующим образом:

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

И добавьте этот новый div в конец тела документа:

document.body.appendChild(shimDiv); 

Для поддержки более старых версий IE вам придется поместить элемент IFrame под прозрачный DIV.

Для динамического создания IFrame из JavaScript попробуйте следующий код:

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

Не забудьте установить атрибут IFrame src с помощью бесполезного оператора 'javascript: false', чтобы IFrame не пытался загрузить страницу (чего вы не заметите, но это станет причиной отключения "Unsecured" Предметы "сообщение, если вы используете его на странице HTTPS).

Поместите этот IFrame под div, задав ему более низкое значение свойства z-index.

iframe.style.zIndex = 2;

Все стили могут быть сделаны с помощью CSS. Я просто хотел показать, как это делается с JavaScript.