0

I want to initially cover up an image with a white background div overtop the image. After the user clicks on a button, a part of the overlaying div will be removed to show part of the image underneath.

So if the image was divided into four, when one of the buttons was clicked, it would remove the z-index for a specific set of coordinates pertaining to that id in the jQuery. I just don't know how to do that using a css style.

Here is the basic outline:

<div id="buttons">
   <ul>
       <li id="0">button0</li>
       <li id="1">button1</li>
       <li id="2">button2</li>
       <li id="3">button3</li>
   </ul>
</div>
<div id="image">
    <div id="overlay"></div>
    <div id="reveal">
        <img src="http://science.nasa.gov/media/medialibrary/2010/03/31/sn_remnant_n63a.jpg/image_thumb" height="128" width="128"/>
    </div>
</div>
<style>
    #image{
        width: 128px;
        height: 128px;
        position: relative;
    }
    #overlay{    
        width:128px;
        height:128px;
        background-color:white;
        z-index: 10;
        position: absolute;
    }
</style>
j08691
  • 204,283
  • 31
  • 260
  • 272
alrightgame
  • 341
  • 2
  • 7
  • 20
  • I don't think it's as straightforward as you might hope. What size are these square masks? Do they overlap? – Ringo Aug 08 '13 at 20:32

6 Answers6

0

Why not overlay it with 4 divs, each (1/4)th of the image?

Update: This might be helpful. Instead of making an overlay, cut the image by pixel coordinates.

Cutting an Image into pieces through Javascript

Community
  • 1
  • 1
Octane
  • 1,200
  • 11
  • 11
  • This is a good idea and I've certainly thought about it. I just wanted to learn if there was a way to change part of a div by coordinates. – alrightgame Aug 08 '13 at 20:34
  • if you want to do it by coordinates with squares of arbitrary size, it might be better to use javascript to render the squares. A library like Raphael.js would probably help. – Ringo Aug 08 '13 at 20:38
0

It would be best to use a "table" to cover the image. You could have as many cells in it as you want. Make sure the sum of widths of all 's is 128px and so is the height.

Here comes the gimmick:

Have something in your css like this

   td.cover{
    /* specify widths and heights */
     background-color:white;
            z-index: 10;
            position: absolute;
        }

Now, as the user clicks on each td, remove that class from that element.

In your javascript, import JQuery from the cdn and,

$('.cover').click(function(){
$(this).removeClass('cover');
})
Sasanka Panguluri
  • 3,058
  • 4
  • 32
  • 54
  • 1
    You're assuming the squares don't overlap, and that they touch the edges of the container. – Ringo Aug 08 '13 at 20:35
  • Good suggestion. However, I still would recommend using divs for this. Tables should only be used for displaying tabular data, not for layout purposes. – War10ck Aug 08 '13 at 20:38
  • 1
    I agree with that -- i would avoid for something like this.
     – Ringo Aug 08 '13 at 20:39
  • We don't need to assume, we could also just specify cell-padding and margin properties so that the cells stick to each other. – Sasanka Panguluri Aug 08 '13 at 20:40
0

Here's what you want to do: http://jsfiddle.net/YYfJ2/1/

I created 4 divs inside of your overlay, each covering one quarter of the image.

In jQuery, I said that when you click a button, a corresponding piece of the overlay would go to visibility: hidden, which retains the space that it takes up, while making the div hidden.

Edit: You can style the 4 divs inside the overlay to be any shape or size that you want, as long as they cover the whole overlay (obviously).

MattDiamant
  • 8,561
  • 4
  • 37
  • 46
0

http://jsfiddle.net/NdD8E/

see the jsfiddle for the answer.

jQuery(function(){   
    jQuery('#0').click(function(){
        jQuery('#overlay1').toggle();
    });
    jQuery('#1').click(function(){
        jQuery('#overlay2').toggle();
    });
    jQuery('#2').click(function(){
        jQuery('#overlay3').toggle();
    });
    jQuery('#3').click(function(){
        jQuery('#overlay4').toggle();
    });
});
War10ck
  • 12,387
  • 7
  • 41
  • 54
Alex Hill
  • 713
  • 1
  • 5
  • 13
0

Based on the code you provided in your question you could handle it like this, but I'm sure there are more elegant ways to do this.

Working Sample: http://jsfiddle.net/9QTPX/1/

<style>
#image{
    width: 128px;
    height: 128px;
    position: relative;
}
#overlay0,#overlay1,#overlay2,#overlay3{    
    width:128px;
    height:128px;
    background-color:white;
    z-index: 10;
    position: absolute;
}
#overlay0{top: 0; left: 0;}
#overlay1{top: 0; left: 64px;}
#overlay2{top: 64px; left: 0;}
#overlay3{top: 64px; left: 64px;}
</style>

<script>
function showImage(id) {
    $(id).toggle();
}
</script>

<div id="buttons">
   <ul>
       <a href="#" class="btn" onclick="showImage('#overlay0');">button0</a>
       <a href="#" class="btn" onclick="showImage('#overlay1');">button1</a>
       <a href="#" class="btn" onclick="showImage('#overlay2');">button2</a>
       <a href="#" class="btn" onclick="showImage('#overlay3');">button3</a>
   </ul>
</div>

<div id="image">
    <div id="overlay0"></div>
    <div id="overlay1"></div>
    <div id="overlay2"></div>
    <div id="overlay3"></div>
    <div id="reveal">
        <img src="http://science.nasa.gov/media/medialibrary/2010/03/31/sn_remnant_n63a.jpg/image_thumb" height="128" width="128"/>
    </div>
</div>
fishsmith
  • 33
  • 4
0

You can do this with 3 lines of code

DEMO http://jsfiddle.net/kevinPHPkevin/vNfv6/

$('.outter').click(function(){
   $('#inner').css({position:'absolute', top:'+=50px'});
});

For a smoother effect change it to

$('.outter').click(function(){
   $('#inner').animate({position:'absolute', top:'+=50px'});
});
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37