Using absolute positioning, I have placed a div with opacity of 0.5 in front of an image by giving it a higher z-index. Also using absolute positioning, I want to put another smaller div in front of the first div using a higher z-index. This smaller div would show only part of the image (like a window), but have no opacity. Eventually, I will make the smaller image draggable. However, what I am struggling with is that, as long as the main div has the 0.5 opacity, the smaller one will also show the picture with the same opacity. How do I overcome this?
A:
if clearing opacity doesn't help here, you'll need to place the small div outside the main div in DOM hierarchy, than place it above the main div using absolute positioning
migajek
2010-08-17 08:09:17
Both divs are absolutely positioned, so they are technically not inside each other and one has a higher z-index. Maybe I didn't understand your answer, sorry.
Ralph Stevens
2010-08-17 08:11:27
+2
A:
Why not going with one of the jQuery plugins already developed? Have a look at this:
http://cool-javascripts.com/effects/10-jquery-plugins-for-manipulating-images.html
Mauro
2010-08-17 08:15:58
Although I wanted the challenge of creating it myself, it seems like imgareaselect does exactly what I need. Thanks.
Ralph Stevens
2010-08-17 08:30:33
You have got source code, you can study it and do your own plugin, I have done it hundreds of times just to have the minimum jquery code to fit your needs. You lose then the support from the developer, each and every new version you'll have to rewrite code on your own. Choose the way that's better for you, but I think reinventing the wheel is not for programmers! :D
Mauro
2010-08-17 08:57:24
+2
A:
Sounds like you've got an answer, but you might be interested in an implementation example anyways.
Your div with 0.5 opacity cannot be one div with 0.5 opacity. It would have to be at least 4 divs with 0.5 opacity, but would probably be most flexible as 8. They would together form 8 tiles in a 3x3 grid with no center tile. They each have 0.5 opacity, and the center tile is non-existent, so it has full opacity. Then you can freely play with the dimensions of the negative space in the middle, adjusting the sizes of the various tiles to match.
If you wanted to make the center area draggable, then it would be a 9th div with 0 opacity and a drag handler.
Hope that helps. The imgAreaSelect plugin appears to use 4 tiles, where the left and right-most tiles occupy the full vertical area (i.e. each occupies 3 spaces in the 3x3 grid).
bcherry
2010-08-17 08:35:46
Interesting... I thought about having multiple divs covering the opaque parts but suspected that there could be an easier way of "penetrating" through the opacity :)
Ralph Stevens
2010-08-17 08:51:51
You could do something like that by having the center div be full opacity with a positioned background image of the image underneath, but it could be quite difficult, depending on the image and other constraints.
bcherry
2010-08-17 09:39:04