HTML/CSS drawing a square window in a css mask

views:

answers:

HTML/CSS drawing a square window in a css mask

Hi,

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

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)

Yman 2010-09-17 08:30:20

+1 for the good suggestion, but note that SVG and Canvas are not the same thing.

Spudley 2010-09-17 08:33:13

These are HTML5 technology and it is quite difficult to get this to work fast with IE. Quote: _"I'm using jquery and I need to support IE7 upwards so html5 only technology is out."_

elusive 2010-09-17 08:33:40

I'd love to use SVG but unfortunately as mentioned by elusive, having to support IE knocks that idea out .......

Protos 2010-09-17 08:45:43

seriously, try it before u knock out this suggestion, and it DOES SUPPORT IE (even IE6) cos im using it.... it has nothing to do with HTML5

Yman 2010-09-17 10:26:44

IE6 does not support SVG. You are probably using a library that uses VML in IE browsers and SVG in other browsers that support it.

Protos 2010-09-17 12:11:22

@Yman: There is nothing like SVG in IE. IE only has VML, which is a proprietary Microsoft thing. Like i said, it is very difficult to get this to run at acceptable speed. The same thing applies to _HTML5_ `<canvas>`, even though you removed it from your post.

elusive 2010-09-17 13:05:19

what do you mean "even though you removed it from your post"?

Yman 2010-09-17 13:48:23

btw, u are right, it is VML, though it still answer the question

Yman 2010-09-17 14:32:54

+1 A:

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

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

Pekka 2010-09-17 08:38:20

This looks very interesting - thanks ! will check it out.

Protos 2010-09-17 08:46:48

ansaurus

tags:

views:

answers:

HTML/CSS drawing a square window in a css mask

related questions