How do i get the link of the topmost positioned image in a website?

Question

I'm writing a script which needs the src of the image which is positioned topmost on any website, NOT the FIRST image in the source, but the one positioned the highest.

i tried something really basic, which is, retrieving the first image tag, however this wont work for images positioned by css/jquery/javascript.

so any idea how i can accomplish this? |----------------- | .....title.... | |------| | |image | <==== link needed | |------| |//text content |Lorem dolor ipsum

Answer 1

I'm not certain about the jQuery reply but I believe that will still only give you relative image coordinate. Following this earlier post showing a method to get the absolute x, y coordinates of a html element on a page, and stealing the same method from PrototypeJS, the following code should do what you need,

Caveats, I think that the 0 top check is safe to use to determine if an image is invisible or not, but it might be problematic. Also, this will only get images inside img tags, not image links or anything set with css.

// cumulative offset function stolen from PrototypeJS
var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

// get all images
var results = document.getElementsByTagName("img");
var images = [];
for (result in results) {
    if (results.hasOwnProperty(result)) {
        images.push(results[result]);
    }
}

// map our offset function across the images
var offsets = images.map(cumulativeOffset);

// pull out the highest image by checking for min offset
// offset of 0 means that the image is invisible (I think...)
var highest = images[0];
var minOffset = offsets[0];
for (i in offsets) {
    if (minOffset.top === 0 ||
            (offsets[i].top > 0 && offsets[i].top < minOffset.top)) {
        minOffset = offsets[i];
        highest = images[i];
    }
}

// highest is your image element
console.log(highest);

Answer 2

You need to compare the .y property of each element.

function getTopMostImage() {
    //Get all images
    var imgs = document.querySelectorAll("img");

    //Define a variable that marks the topmost image
    var topmost = imgs[0];

    //Check all image positions and mark the topmost
    for (i = 1; i < imgs.length; i++) {
        if (topmost.y > imgs[i].y)
            topmost = imgs[i];
    }
    return topmost.src;
}

Answer 3

After load you can check the first img element present in Dom by first() Docs are here Hope it helps

Answer 4

// Use the most appropriate selector for your images such as "body img" or bla bla...
var images = jQuery('img');
var topMostImageIndex = 0;

for (var i = 0; i < images.length; i++) {

    if (jQuery(images[i]).position().top < jQuery(images[topMostImageIndex]).position().top) {

        topMostImageIndex = i;
    }
}

// It's the top-most image
images[topMostImageIndex];