The CSS Opacity Property Pop-up Method

Test this pop-up method: Using the CSS Opacity Property Pop-up Method


Windows IE: OK
Windows Firefox: OK
Windows Safari: OK
Windows Opera: No good—nothing appears where the object should be.
Mac IE: Object appears instantly without opacity fade-in.
Mac Firefox: OK
Mac Safari: OK

BACK TO LIST OF POP-UP METHODS
BACK TO HOME PAGE



We got fancy with the CSS Opacity property type of pop-up, which is a pop-up that slowly appears on the page. There is a lot more code to make this work than ought to be needed. But this is a classic case of each browser maker deciding to go his own way. Worse yet, IE 6, IE 7, and IE 8 all have different coding needs for this feature. The result is that we had to state the opacity codes 4 different ways, to try to please everyone. But, in spite of all the over-coding, with Windows Opera it was no good—nothing appears where the object should be. With Mac IE, the object appears instantly without opacity fade-in. The biggest lack in these CSS properties is the lack of addressibility from DHTML JavaScript routines. No DOM-addressible CSS properties on a couple of these opacity properties means that you can use a For loop and increase the numbers the easy way while changing the opacity percent by DHTML for two of these but the other two cannot do it this way—there is no known way of dynamically changing this percent. Which means that a DHTML routine will cover you on some browsers but not others. IE will be the messiest of the DHTML routines to write, due to the IE 6, IE 7, and IE 8 differences.

opacity:.72;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=72)";filter:alpha(opacity=72);-moz-opacity:0.72

REALLY, Microsoft???

You may use this technique to present pop-up ads, or to solicit subscribers to your ezine, newsletter, or RSS feed. Use if for reminders, warnings, or statistics displaying. You may get survey participants, ask for donations, or use it for political fund raising. You can even inform visitors about some of your other related websites. There is no end to the types of purposes that pop-ups can be used for.

If your pop-up is about thumbnail enlargement, check out What is the easiest way to do thumbnail image enlargement windows? If you want thumbnail enlargement without clicking, check out Making an Image Enlarge When The Mouse Cursor Is Hovering Over It.





THE CODE



<html>
<HEAD>
<title>The CSS Opacity Property Pop-up Method</title>

<style type="text/css">

.p {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1.0}
.pp {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:.86;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=86)";filter:alpha(opacity=86);-moz-opacity:.86}
.q {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:.72;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=72)";filter:alpha(opacity=72);-moz-opacity:0.72}
.qq {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:.58;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=58)";filter:alpha(opacity=58);-moz-opacity:0.58}
.r {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:.44;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=44)";filter:alpha(opacity=44);-moz-opacity:0.44}
.rr {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:.30;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:alpha(opacity=30);-moz-opacity:0.30}
.s {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:.15;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";filter:alpha(opacity=15);-moz-opacity:0.15}
.ss {position:absolute;top:200px;left:300px;height:50px;width:50px;opacity:.0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0.00}

</style>

<script type="text/javascript">

var Netscape=(navigator.appName.indexOf("Netscape") != -1);

var counter=0
var counters=0

function show(){
e=document.getElementById('o')
counter++;if(counter>8){counter=0;return}
if(counter==1){if(Netscape){e.setAttribute("class","ss")} else {e.setAttribute("className","ss")}}
if(counter==2){if(Netscape){e.setAttribute("class","s")} else {e.setAttribute("className","s")}}
if(counter==3){if(Netscape){e.setAttribute("class","rr")} else {e.setAttribute("className","rr")}}
if(counter==4){if(Netscape){e.setAttribute("class","r")} else {e.setAttribute("className","r")}}
if(counter==5){if(Netscape){e.setAttribute("class","qq")} else {e.setAttribute("className","qq")}}
if(counter==6){if(Netscape){e.setAttribute("class","q")} else {e.setAttribute("className","q")}}
if(counter==7){if(Netscape){e.setAttribute("class","pp")} else {e.setAttribute("className","pp")}}
if(counter==8){if(Netscape){e.setAttribute("class","p")} else {e.setAttribute("className","p")}}
nada=setTimeout("show()", 70)
}

function hide(){
e=document.getElementById('o')
counters++;if(counters>8){counters=0;return}
if(counters==1){if(Netscape){e.setAttribute("class","p")} else {e.setAttribute("className","p")}}
if(counters==2){if(Netscape){e.setAttribute("class","pp")} else {e.setAttribute("className","pp")}}
if(counters==3){if(Netscape){e.setAttribute("class","q")} else {e.setAttribute("className","q")}}
if(counters==4){if(Netscape){e.setAttribute("class","qq")} else {e.setAttribute("className","qq")}}
if(counters==5){if(Netscape){e.setAttribute("class","r")} else {e.setAttribute("className","r")}}
if(counters==6){if(Netscape){e.setAttribute("class","rr")} else {e.setAttribute("className","rr")}}
if(counters==7){if(Netscape){e.setAttribute("class","s")} else {e.setAttribute("className","s")}}
if(counters==8){if(Netscape){e.setAttribute("class","ss")} else {e.setAttribute("className","ss")}}
nadas=setTimeout("hide()", 70)
}

</script>
</head>
<body>

<IMG SRC="doorknob.gif" WIDTH=50 HEIGHT=50 BORDER=0 onMouseOver="javascript:show();return true" onMouseOut="javascript:hide();return true">

<div id="o" class='ss'><IMG SRC="doorknob.gif" WIDTH=50 HEIGHT=50 BORDER=0></div>

</body>
</html>