Getting the X and Y position of a html Element in the WebBrowser control

Question

Hi guys,
I am real stuck!
I am trying to automate a proccess of saving images and metadata from some sites I use and the method I chose to do this was to:
- Create a windows form
- Add a webbrowser object
- Navigate to page
- on mouse over ov a "img" element move a button to the top right corner of the image

That is where I am stuck! While I found a couple ways to get the position of the image when I scroll down the page it seems to not work anymore.

Is there a way to get the current screen position of an html element so I can overlay a button on the top right corner of it regardless of where I am in the document body? (scrolling)

Thanks so much in advance I played around with this for over an hour!

Chad Torkkola · Answer

I've spent the night playing with OffsetRectangle and iterating through parents. As in the sample above. I can't seem to figure out a value I can use as a offset to calculate the images position on the screen. I tried playing with this as well: HtmlDocument htmlDoc = webBrowser1.Document; scroll = htmlDoc.GetElementsByTagName("HTML")[0].ScrollTop; When I print this value and start playing around with it I can see that if I: -Position my mouse at 650 (ish) and then scroll the document -Print the offset value for Y which is calculated in the exact same method as the code I posted above for getting X. -Print the ScollTop value I get something like this: Y = 650 (about where the Y will need to be when I place the button) YOffset = 1735 (The Y of the Top of the htmlElement in the document) Scroll = 1588 (the scrollable area of the document. I can almost come up with a reliable offset value but I think that there is a big piece I am missing here, (or I am completely approaching this wrong) The math I attempted is as follows: CursorY - (Yoffset - scroll ) This usualy results in a value of about 400 when we are really trying to get close to zero for a system that would give a consistent position. Anyone have any ideas of other things I could look at?

Chad Torkkola · Answer

As I mentioned my goal was to move or create a button to the top right corner of the Image I am currently mousing over. That sounds simple enough but getting the actual position of the image and then consistently placing the button on the top right corner of it, regardless of the size of the button is where I seem to be having trouble. I was able to piece together a solution that got the absolute position of the images using examples of work other people had posted across the internet but what i found was the positioning of the buttons were only correct up until I started to scroll the html document. After which the image seems to be appearing off page. I tried to correct this by setting some break points and analyzing the properties of the html element when I moused over them but I can't seem to find a way to tie together the actual screen position (x and Y) of the image using anything I found during my investigation. I COULD use the cursor coordinates but this creates inconsistencies because you don't really control where the cursor is in relation to the image when the user hovers over it. I was wondering if anyone knew of any tricks for this or might be able to steer me in the right direction. I did play around a little bit with your web scraper prior to posting this as I had considered simply scraping all of the images and placing them in a web grid. This is something I may end up doing but have not yet made that commitment. Here is an example of my initial attempt which works until I start scrolling the webpage. //get element pos int xPos = el.OffsetRectangle.Left; //get the parents pos HtmlElement tempEl = el.OffsetParent; while (tempEl != null) { xPos += tempEl.OffsetRectangle.Left; tempEl = tempEl.OffsetParent; } return xPos + 35;

Sam Hobbs · Answer

An hour? Only an hour? I have spent many hours on many things like that. Yes the DOM is confusing and poorly documented. In many forums, it is requested that people seeking help provide a small explanation of what they have tried. What have you learned/tried? If you ask questions in other forums, you are more likely to get help if you provide that information. I am not sure what you need. You say "get the current screen position of an html element" which is clear enough but you also say "regardless of where I am in the document body" and that confuses me. So perhaps I do not understand what you mean by position; position relative to what? My article Introduction to Web Site Scraping might help.

Getting the X and Y position of a html Element in the WebBrowser control

Answers (3)