Un bookmarklet Javascript peut-il superposer une image sur une page Web?

Question

Un signet peut-il être utilisé pour superposer une image sur une page Web? Non pas en tant que pop-up, mais en tant qu'image positionnée par CSS et avec un indice z élevé à afficher au-dessus des autres éléments. Et sans masque, c'est-à-dire Shadowbox ou un effet jQuery similaire. Juste une image d'une URL et placé dans le coin inférieur gauche de la fenêtre du navigateur.

C'est ce que j'ai jusqu'à présent, mais il peut être la mauvaise direction à aller:

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>");})() 

J'ai une fonction JS qui fonctionne comme un bookmarklet pour changer le cas du texte sur la page, et maintenant je voudrais pouvoir montrer une image quand le bookmarklet est utilisé.

Answer 1

Définition d'une image d'arrière-plan pour le corps ne sera pas utile si vous voulez que l'image superposition la page. En outre, document.write ne peut pas être utilisé directement pour ajouter des styles CSS.

Qu'est-ce que vous voulez sans doute faire est d'ajouter un nouvel élément img à la page, et de lui donner absolute ou fixed positionnement, avec un haut z-index.

Voici un exemple qui ajoute le logo SO au coin de la fenêtre, en utilisant fixed positionnement:

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

Je ne pense pas que document.write serait approprié ici; pourquoi ne pas créer un nouvel élément img et l'ajouter au corps?

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