0

I don't know if this possible, but I want to invert the colors of a background image in the region overlapped by a div. I have a background image that covers the entire page and a horizontal, transparent div that is on top of the image. Is this possible in javascript/css? If so, how should I approach this?

More info: the region would span the width of the page and be about 100px tall.

Edit: The background image is not located in the div, but rather I want the div to serve as the region of the bg to be inverted (or not even use a div and just process the image directly).

Mushy
  • 172
  • 1
  • 2
  • 13
  • Here's a question for inverting the whole page: http://stackoverflow.com/questions/4766201/javascript-invert-color-on-all-elements-of-a-page. You could easily modify one solution there (especially [this one](http://stackoverflow.com/a/4766232/603003)) to only apply the color invertion to your `
    `.
     – ComFreek May 30 '13 at 00:42
  • Sorry, I edited my post to be more clear. I don't want to invert the div itself, but instead the background image of the page. The div will only serve as the region to invert (or maybe I should not use a div, but just process the region I want). – Mushy May 30 '13 at 00:46
  • Collision detection is a whole different kind of fun: http://eruciform.com/jquerycollision/ – Charlie May 30 '13 at 01:02
  • @Charlie - That does look fun! Though I think it's unnecessary if I take the approach of inverting all the pixels in a region instead of worrying about element collisions . – Mushy May 30 '13 at 01:12
  • How are you defining the region though? – Charlie May 30 '13 at 22:48

1 Answers1

0

I think that if you want to do by code, you can either go the hard way and do it via canvas in html5, where you define the boundaries, using the overlap div window size, or you can go the easy way and simply edit your image and invert the area.

But of course, really depends if you want a resizable / movable window, or other ideas you have in mind.

Akatosh
  • 448
  • 9
  • 17
  • Thanks for the links. I would want to be able to scroll, resize, etc . – Mushy May 30 '13 at 00:56
  • I would add a jsfiddle, but it seems that you need to have an image on the same server that you are running the code. So, on the getImageData function, just define the edges every time you those operations and you are good to go. – Akatosh May 30 '13 at 01:05