HTML/CSS drawing a square window in a css mask

0
votes

So I have a grid of images (map tiles) and I draw a semi-transparent mask over it using an absolutely positioned div with width and height set to 100%.

I now want the user to be able to draw out a rectangle on the mask, with the mouse using mouse-down, drag, mouse-up. The rectangle would be drawn dynamically as the mouse moves, and the rectangle would be like a window through the mask displaying the map tiles underneath with no semi-transparency.

I'm currently looking at using 5 divs - one for the window and 4 for the mask which would be resized using javascript as I drag the mouse. Does anyone know an easier way to do this ? I'm using jquery and I need to support IE7 upwards so html5 only technology is out.

Cheers,

Colm

2
javascripthtmlcssmask
Your idea is how I would do it... So good job haha - colithium

2 Answers

1
votes

I think the jQuery Crop plugin does exactly what you need (Demo here).

Maybe it's possible to carve that part out from it.

-1
votes

You should try out SVG canvas instead. There's a SVG js library, good for beginner: http://raphaeljs.com/, check it out

PLEASE NOTE THAT THIS HAS NOTHING TO DO WITH HTML5 (PLEASE DONT MIX UP WITH HTML5 CANVAS, THIS IS SVG)