Hello. There is a task: to determine the actual viewing of the image (block). To do this, I determine the position of the block on the page, take into account the scrolling, display and visibility properties, tab activity in the browser. There is only one thing left - the definition of visibility relative to other elements. Those. Are there any elements that are positioned directly above my image. Can anyone come across or who have ideas on how to implement this?

    2 answers 2

    I'm afraid it's actually almost impossible. Imagine the overlying element:

    • Has an opacity other than 1
    • It has a background-color with an alpha channel other than 1
    • Has a background gradient with elements of transparency
    • On the contrary, it is completely transparent, but has an overlapping opaque :before / :after
    • Completely overlaps the underlying element, but does not overlap :before / :after underlying element
    • Sizes one to one, but rotated forty-five degrees
    • Represents an image with alpha channel support.
    • And a bunch of options.

    The closest solution to take is a special pseudo-class :visible from jQuery, jQuery(element).is(':visible'); will return the result of the required verification. The jQuery developers have probably already embarked on all existing rakes and implemented protection against them.

    • I think you have a little wrong question answered. From jQuery docks: "The elements are visible." That is, you can see it really or not, in this selector is not taken into account. Look at the phrase in the question "... right above my image ..." - tutankhamun
    • @tutankhamun yes, you're right, I'm editing now. - etki
    • Well, let's say, you convinced me to forget about it) - Gomonov
    • @Gomonov I'm afraid so far otherwise. Javascript is not omnipotent in the browser and most of the specified points will not solve everything - tutankhamun

    Alternatively, use z-index

     <div style="border: 1px solid #000; height: 200px; width: 200px; background: green; z-index: 1000; position: relative;"></div> <div style="border: 1px solid #000; height: 200px; width: 200px; background: red; position: absolute; left: 50px; top: 50px;"></div>

    jsFiddle demo

    • You thought of my question. I do not need to do anything to me, and so and so happy) I just need to understand whether the image is visible or not. - Gomonov