Target images on a page, add button

[webgodjj]

Hi, I am creating a bookmarklet which will target images on a page. I would like to add a custom link on the bottom right corner for each image found (much like the pintrest bookmarklet does).

I know how to find each image by using this: document.body.getElementsByTagName(“img”). This seemed to work better than just calling document.images, which also returned background images and such.

So I would do this:

function checkimages() {
 var images = document.body.getElementsByTagName("img");
 for (var i=0; i<images.length; i++){
    ---- SUFF IN HERE ----
 } }

That’s as far as I got. The problem I think is understanding how to align a button on the bottom right of the image.

[megazoid]

Hi

I made an example with comments for you: http://jsfiddle.net/wx0howag/
Feel free to use that code if you want

But I have to warn you that my solution may affect CSS styles on the target site.
That is because it wraps each img with custom div, so strict CSS rules like #someid > img may stop working.
It’s possible to solve the task without wrapping, but then there will be another issue - you have to use absolute positions for buttons in that case, so if user changes size of the window these absolute coordinates should be updated too