Может ли букмарклет Javascript накладывать изображение на веб-страницу?

Question

Можно ли использовать букмарклет для наложения изображения на веб-страницу? Не как всплывающее окно, а как изображение, позиционируемое CSS и имеющее высокий z-индекс для отображения поверх других элементов. И без маски, т.е. Shadowbox или подобного эффекта jQuery. Просто изображение с URL-адреса, расположенное в левом нижнем углу окна браузера.

Это то, что я имею до сих пор, но это может быть неправильное направление:

javascript:(function(){document.write("<style type='text/css'>body {background-image:url(http://example.com/image.png); position: absolute; left:50px; top:300px; z-index:9999;}</style>");})()

У меня есть функция JS, которая работает как букмарклет для изменения регистра текста на странице, и теперь я хотел бы иметь возможность показывать изображение при использовании букмарклета.

Answer 1

Установка фона изображения для тела не поможет, если вы хотите, чтобы изображение перекрывало страницу. Кроме того, document.write нельзя напрямую использовать для добавления стилей CSS.

Что вы, вероятно, хотите сделать, это добавить новый элемент img на страницу и задать ему позиционирование absolute или fixed вместе с высоким z-index.

Вот пример, который добавляет логотип SO в угол окна, используя fixed позиционирование:

javascript:(function(){document.body.innerHTML += '<img src="http://sstatic.net/so/img/logo.png" style="position: fixed; left: 10px; bottom: 10px; z-index: 1000">';})();

Answer 2

я не думаю, что document.write будет уместно здесь; почему бы не создать новый элемент img и добавить его в тело?

var img = document.createElement('img');
img.src = 'urlhere';
// TODO: set position and whatnot
body.appendChild(img);