How to draw rectangle on the website to highlight?

Question

Is there any way to implement a Google feedback like feature as shown here? We can make the website slightly black-out using CSS, but how can we draw a rectangle on the that particular interface like highlighting some text or error. We can use same concept like sprite cow, has used to highlight the rectangle on particular image link. Any kind of idea and source is welcomed.

Thanks

Answer 1

The most straightforward way to do this is, probably, to just have a div that are created when you drag the mouse over the page.

I suspect Google does it using something like this:

• Draw a slightly dimmed div ("dimmer") on top of the whole page

• When the user clicks and drags on the dimmer, they split it in multiple divs like this:

  ### | ## | ###
  ----+----+----
  ### |    | ###
  ----+----+----
  ### | ## | ###
  

• In the above, the center area is the area the user was dragging over

• The center area is now empty, and you can see the site through it, because the dimmer was split into 8 smaller divs.
• While the user keeps the mouse button held down, the script keeps resizing the split dimmer divs to accommodate the rectangular area the user has dragged.

(It might also omit the extra divs I included in the diagram, so that it only has one div above, and one div below, the rectangle since it would work without them too)