The DOM setAttribute Pop-up Method

Test this pop-up method: Using the DOM setAttribute Pop-up Method


Windows IE: OK
Windows Firefox: OK
Windows Safari: OK
Windows Opera: No good—nothing happens.
Mac IE: OK
Mac Firefox: OK
Mac Safari: OK

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


This one is pretty straightforward: Just set a couple of flag switches so you can hide and show a div via changing the Class attribute. I don't know why Windows Opera cannot seem to handle this—the setAttribute code is standard JavaScript.

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 DOM setAttribute Pop-up Method</title>

<style type="text/css">

.p {position:absolute;top:200px;left:300px;background-color:lightblue;border:1px solid black;height:30px;width:200px;padding:5px}
.q {position:absolute;top:200px;left:-300px;background-color:lightblue;border:1px solid black;height:30px;width:200px;padding:5px}

</style>

<script type="text/javascript">

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

var t=1

function show(w){if(t==1&&w==1){var node=''
node=document.getElementById("id")
if(Netscape){node.setAttribute("class","p")} else {node.setAttribute("className","p")}
t=0
}
if(t==0&&w==0){t=1
node=document.getElementById("id")
if(Netscape){node.setAttribute("class","q")} else {node.setAttribute("className","q")}};}

</script>
</head>
<body>

<div style="position:absolute; left:50px; top:50px; width:50px; height:50px;z-index:9">
<IMG SRC="doorknob.gif" WIDTH=50 HEIGHT=50 BORDER=0 onMouseOver="javascript:show(1);return true" onMouseOut="javascript:show(0);return true"></div>

<div class='q' id='id'>Did someone order a pop-up?</div>

</body>
</html>