While working with HTML in web designing, sometime we need to overlap a div with another. Those who do it for the very first time find it difficult to do that. Here i have provided a simple example to make it easier for you to do it.
The following code will overlap an existing DIV (with an image). There will be 9 different DIVs overlapping that image at different locations. Opacity of these DIVs can also be changed using a simple function. Check the live version of that code in running condition and then its code provided below.
The following code will overlap an existing DIV (with an image). There will be 9 different DIVs overlapping that image at different locations. Opacity of these DIVs can also be changed using a simple function. Check the live version of that code in running condition and then its code provided below.
Running Version:
Code:
|
<div style="position:relative;width:200px;height:200px;float:left;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKSLSlV_MN1oKe4ArWJWi0ICvnAYert1_eNJ4TumG5hfniIxWAjqU_2c7nDrH2lesLwnl-soaITe1LCJo_M-KQwMm2-js_xZyJGpdNYj_MCk9dDoc_d9die3kR4tP9mEUJwYOFlxQtz-B/s1600/c1.jpg" /> <div id="div1" style="position:absolute;opacity:0.9;top:0;left:0;width:66px;height:66px;background-color:red"></div> <div id="div2" style="position:absolute;opacity:0.9;top:0;left:66px;width:66px;height:66px;background-color:green"></div> <div id="div3" style="position:absolute;opacity:0.9;top:0;left:132px;width:66px;height:66px;background-color:blue"></div> <div id="div4" style="position:absolute;opacity:0.9;top:66px;left:0px;width:66px;height:66px;background-color:yellow"></div> <div id="div5" style="position:absolute;opacity:0.9;top:66px;left:66px;width:66px;height:66px;background-color:pink"></div> <div id="div6" style="position:absolute;opacity:0.9;top:66px;left:132px;width:66px;height:66px;background-color:orange"></div> <div id="div7" style="position:absolute;opacity:0.9;top:132px;left:0px;width:66px;height:66px;background-color:purple"></div> <div id="div8" style="position:absolute;opacity:0.9;top:132px;left:66px;width:66px;height:66px;background-color:violet"></div> <div id="div9" style="position:absolute;opacity:0.9;top:132px;left:132px;width:66px;height:66px;background-color:indigo"></div> </div> <input type="button" value="Remove Red" onclick="remove()" /> <script> function remove() { document.getElementById('div1').style.opacity=0; } </script> |
No comments:
Post a Comment