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

Можно ли использовать букмарклет для наложения изображения на веб-страницу? Не как всплывающее окно, а как изображение, расположенное с помощью 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, которая работает как букмарклет для изменения регистра текста на странице, и теперь я хотел бы иметь возможность показывать изображение при использовании букмарклета.


javascript css bookmarklet
person markratledge    schedule 19.03.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Установка фонового изображения для основного текста не поможет, если вы хотите, чтобы изображение накладывалось на страницу. Кроме того, 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">';})();
person Tobias Cohen    schedule 20.03.2010
comment
Спасибо! Не знал, что у меня есть вызов фонового изображения. Это отлично работает для логотипа SO и для изображения, которое я хочу использовать. Но... иногда в IE с прокручиваемым содержимым страницы изображение оказывается внизу страницы вне поля зрения. Не знаю, как это будет исправлено. Тоже не похоже на последовательность. - person markratledge; 22.03.2010
comment
Ну, IE6 не поддерживает position:fixed, так что это может быть вашей проблемой. Для этого есть обходной путь, но на самом деле он полезен только при создании сайта с нуля, так как может сломать множество других CSS. Написание кроссбраузерных букмарклетов — сложная задача. - person Tobias Cohen; 22.03.2010
comment
Это был IE8, но он должен быть специфичен для сайта со сложным CSS, и он будет использоваться именно на более простом сайте. Так что это не имеет большого значения. Спасибо еще раз. - person markratledge; 22.03.2010

arrow_upward
1
arrow_downward

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

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