HTML/CSS dessinant une fenêtre carrée dans un masque css

Question

J'ai donc une grille d'images (carreaux de carte) et j'y dessine un masque semi-transparent en utilisant un div positionné avec une largeur et une hauteur de 100%.

Je veux maintenant que l'utilisateur soit capable de dessiner un rectangle sur le masque, avec la souris en utilisant la souris vers le bas, faites glisser, souris. Le rectangle serait dessiné dynamiquement lorsque la souris se déplace, et le rectangle serait comme une fenêtre à travers le masque affichant les carreaux de la carte en dessous sans semi-transparence.

Je cherche actuellement à utiliser 5 divs - un pour la fenêtre et 4 pour le masque qui serait redimensionné en utilisant javascript lorsque je fais glisser la souris. Est-ce que quelqu'un sait un moyen plus facile de le faire? J'utilise jquery et j'ai besoin de prendre en charge IE7 vers le haut, donc la technologie html5 seule est sortie.

Cheers,

Colm

Answer 1

I pense que le jQuery Crop plugin fait exactement ce dont vous avez besoin (Démo here).

Il est peut-être possible de découper cette pièce.

Answer 2

Vous devriez essayer canevas SVG à la place. Il y a la bibliothèque d'un SVG, bon pour les débutants: http://raphaeljs.com/, check it out

S'IL VOUS PLAÎT NOTE QUE CE N'A RIEN À FAIRE AVEC HTML5 (S'IL VOUS PLAÎT NE CONFONDRE AVEC HTML5 TOILE, CECI EST SVG)