Jump to content

separate opacity on image

gongpex

By gongpex
in JavaScript

Recommended Posts

gongpex Member

gongpex

Posted
Posted

Hello everyone My question is still about this code: 

<html><head><style type="text/css">.dis1 {color:#FF0000;z-index:0;cursor:pointer;position:absolute;margin:40px 0px 0px 50%;}.text {color:yellow;margin:85px auto 0 30%;position:absolute;cursor:pointer;width:50px;height:10px;}#pic{width:100%;height:100%;left:0;height:0;bottom:0;top:0;opacity:1;position:absolute;z-index:-1;}#pic2{width:800px;height:600px;position:absolute;z-index:10;opacity:1;background:url('image.jpg') no-repeat;}#dis2 {margin:0px;color:#000000;left:0;right:0;bottom:0;top:0;width:100%;height:100%;background:#222 repeat;z-index:10;position:absolute;opacity:0.75;filter:alpha(opacity=75);display:none;}#dis2 img {opacity:1;filter:alpha(opacity=100);}</style></head><script type="text/javascript">function disp() {document.getElementById("dis2").style.display="block";}function dispn() {document.getElementById("dis2").style.display="none";}</script><body><div class="dis1" onclick="disp('3000')">DISPLAY</div><span id="dis2"><div class="text" onclick="dispn()">CLOSE</div><div id="pic"><div id="pic2"></div></div></span><br /></body></html>

when I click on 'DISPLAY' button it can show popup, but this code can cause effect when I put image inside, it can cause image wrapped with opacity effects how to separate image from opacity effects? I had attach image on attachment please someone help me Thanks

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

opacity affects all content within the container. try using a transparent background image for the element instead.

Link to comment
Share on other sites
gongpex Member

gongpex

Posted
  • Author
Posted

Thanks for reply , but I had tried to put background transparent like this : 

#pic2{width:800px;height:600px;position:absolute;z-index:10;opacity:1;background:url('image.jpg') no-repeat transparent;}

but the results are still same, please someone help me, thanks__________________________________________________________________ I'm very astonished , with JQuery, JQuery are from javascript, right? why it can do to create light box, but the image is not wrapped by opacity? I think javascript also can do same as JQuery, right?

Link to comment
Share on other sites
Don E Invested Member

Don E

Posted
Posted

jQuery is JavaScript, yes can do same. Are you trying to place opacity over the image when clicked on Display and only on the image itself? In other words, you want to wrap opacity over the image itself when clicked on Display?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

As mention before you have to separate the child elements from background div that will become transparent. this background must be placed on its own within the body of the document, and not within any other child element within the body, as it has to fill the whole area of the body and not be restricted, by confines of child element that may use position: relative; Only then can sort out the positioning of the image, without the problem of transparency being applied to this image and other elements. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"><html><head><style type="text/css">.show {color:#FF0000;cursor:pointer;margin:40px 0px 0px 0;text-align:center;}.close {color:yellow;position:absolute;right:20px;top:20px;width:65px;height:25px;z-index:15;display:block;text-decoration:none;background-color:#333333;text-align:center;border-radius:5px;line-height:25px;border:1px solid red;}.close:hover { border-color:#0099FF;} #image_container{width:800px;height:600px;position:relative;z-index:10;opacity:1;background:url(image.jpg) no-repeat;}#trans_bg {margin:0px;color:#000000;left:0;right:0;bottom:0;top:0;width:100%;height:100%;background:#222 repeat;z-index:0;position:absolute;opacity:0.75;display:none;}#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell;}</style><!--[if IE]><style>#outer {filter: alpha(opacity = 75);}</style><![endif]--><!--[if lte IE 7]><style>  /* centering for ie6/ie7 */#outer { z-index:999;}  .middle { position:absolute; top:50%; left:50%; height:auto;  z-index:999;}  .inner { position:relative; top:-50%; left:-50%; }</style><![endif]--></style></head><script type="text/javascript">function show_display() {document.getElementById("trans_bg").style.display="block";document.getElementById("outer").style.display="block";}function hide_display() {document.getElementById("trans_bg").style.display="none";document.getElementById("outer").style.display="none";}</script><body><div class="show" onClick="show_display('3000')">DISPLAY</div><div id="outer"><div class="middle"><div class="inner"><div id="image_container"><a href="javascript:void(0);" class="close" onClick="hide_display()">CLOSE</a></div></div></div></div><div id="trans_bg"></div></body></html>

Link to comment
Share on other sites
gongpex Member

gongpex

Posted
  • Author
Posted
As mention before you have to separate the child elements from background div that will become transparent. this background must be placed on its own within the body of the document, and not within any other child element within the body, as it has to fill the whole area of the body and not be restricted, by confines of child element that may use position: relative; Only then can sort out the positioning of the image, without the problem of transparency being applied to this image and other elements. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"><html><head><style type="text/css">.show {color:#FF0000;cursor:pointer;margin:40px 0px 0px 0;text-align:center;}.close {color:yellow;position:absolute;right:20px;top:20px;width:65px;height:25px;z-index:15;display:block;text-decoration:none;background-color:#333333;text-align:center;border-radius:5px;line-height:25px;border:1px solid red;}.close:hover { border-color:#0099FF;} #image_container{width:800px;height:600px;position:relative;z-index:10;opacity:1;background:url(image.jpg) no-repeat;}#trans_bg {margin:0px;color:#000000;left:0;right:0;bottom:0;top:0;width:100%;height:100%;background:#222 repeat;z-index:0;position:absolute;opacity:0.75;display:none;}#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell;}</style><!--[if IE]><style>#outer {filter: alpha(opacity = 75);}</style><![endif]--><!--[if lte IE 7]><style>  /* centering for ie6/ie7 */#outer { z-index:999;}  .middle { position:absolute; top:50%; left:50%; height:auto;  z-index:999;}  .inner { position:relative; top:-50%; left:-50%; }</style><![endif]--></style></head><script type="text/javascript">function show_display() {document.getElementById("trans_bg").style.display="block";document.getElementById("outer").style.display="block";}function hide_display() {document.getElementById("trans_bg").style.display="none";document.getElementById("outer").style.display="none";}</script><body><div class="show" onClick="show_display('3000')">DISPLAY</div><div id="outer"><div class="middle"><div class="inner"><div id="image_container"><a href="javascript:void(0);" class="close" onClick="hide_display()">CLOSE</a></div></div></div></div><div id="trans_bg"></div></body></html>

This is works , Good Thanks for reply
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...