I have 4 div containers, each containing an image. The positioning of the divs is as follows: top left, top right, bottom left, and bottom right. Additionally, there is another disabled div in the center panel control.
When any of the divs (top left, top right, bottom left, or bottom right) are clicked, all four divs should be disabled and their visibility set to false.
The clicked div should then appear in the center div within the panel.
Is it possible to achieve this functionality using only div clicks?
It's worth noting that there are no button controls available for use.
I aim to manage all interactions solely through clicking on the div elements.
Here is the code snippet:
<div class="img_top" style="margin-top: 40%">
<div class="img_top_left">
dgsdfg</div>
<div class="img_top_right">
dfgdsfg</div>
</div>
<div class="img_bottom" style="margin-top: 60%">
<div class="img_bottom_left">
dgsdfg</div>
<div class="img_bottom_right">
dfgdsfg</div>
</div>
<asp:Panel ID="Panel1" runat="server">
<div class="img_center">
</div>
</asp:Panel>
CSS Styles:
.img_center
{
margin-top:50%;
height:250px;
background-color:Green;
}
.img_top_left
{
height:250px;
width:40%;
float:left;
background-color:Blue;
}
.img_bottom_right
{
height:250px;
margin-left:20%;
width:40%;
float:left;
background-color:Orange;
}
.img_bottom_left
{
height:250px;
width:40%;
float:left;
background-color:Blue;
}
.img_top_right
{
height:250px;
margin-left:20%;
width:40%;
float:left;
background-color:Orange;
}