En el siguiente HTML, colocar el mouse sobre la primera imagen (corta) y arrastrarla resalta un bloque que contiene la "participación" de ese elemento en su división principal (como en la captura de pantalla adjunta). ¿Esta región está disponible de alguna manera? Sé que puedo obtener su tamaño y coordenadas y usarlos para colocar un div sobre él, pero ¿hay alguna forma más limpia de imitar la selección? Actualmente estoy resaltando las imágenes, pero dadas las diferentes alturas, eso no se ve tan bien como lo hace la selección. (¿Quizás usar una cuadrícula ayudaría?)
Estoy probando en Chrome. El comportamiento es el mismo en Safari, pero en Firefox solo se resalta la imagen, no el espacio sobre ella.
<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>