0
135
Viewsmimicking range highlighting using css
In the following HTML, placing the mouse over the first (short) image and dragging it highlights a block containing that element's "share" of its parent division (as in the attached screenshot). Is this region available in any way? I know I can get its size and coordinates and use those to position a div over it, but is there any cleaner way to mimic selection? Currently I'm highlighting the images, but given the different heights that doesn't look as nice as selection does. (maybe using a grid would help?)
I'm testing on Chrome. The behavior is the same on Safari, but on Firefox only the image is highlighted, not the space above it.
<html>
<head>
</head>
<body>
<h1>Top line</h1>
<div>
<img height="50px" width="200px" />
<img height="150px" width="200px" />
<img height="250px" width="200px" />
</div>
<h1>Bottom line</h1>
</body>
</html>
·
Juan Pablo Isaza
Answer question