How To Make Your OwnWOW! Pop-Ups

Maybe you've seen pop-ups like this before (CLICK HERE TO SEE AGAIN). I call this the WOW! Pop-Up . You can call it what you want.

The great thing about it is that it really captures the attention of your website visitor. And secondly, it does not get blocked from pop-up blockers.

Many people are asking a huge amount of money if you were to have a pop-up like this on your website. Before now you had to buy expensive software or subscribe to a service to get this level of quality in a post-it type popup.

Well, here you can learn how you can do it yourself � free of charge.

Let me tell you how it's done ...

As you can see, the image that appears in the browser has a cool, semi-transparent look. When you look at the shadow of the object, you can still see the background. And you wonder how they do this.

Transparent GIF may come to mind. But transparent GIFs can't produce a smooth transparent look like that. What transparent GIF has is what they call binary transparent. That is, at a certain pixel, either it's transparent or it's not.

But the shadow that you see carries color in its transparency. It's like controlling the opacity of the area.

Many web designers and programmers already know about this. But if you don't, here's the secret � PNG image. PNG is another image format that you can use on the web apart from GIF and JPG.

With PNG you can control the opacity of a certain area, and when it appears in the browser, that is how it will look like. So the cool pop-ups that you see, there's not big secret to it � they are all PNG images.

Many graphic software like Photoshop, GIMP, Photoshop Elements, Photopaint, PaintShop Pro � all support PNG image creation. Just design your image, put any opacity factor where ever you want, and export it as 24-bit PNG.

Saving image as PNG 24-bit in Adobe Photoshop, in the Save for Web option

But there's a problem ...

While many browsers like Opera, Firefox, Konquerer and more already fully support PNG image format, Internet Explorer does not. You can simply use the <IMG> tag to call a PNG image in other web browsers, but you can't do that with Internet Explorer. Internet Explorer will still display the PNG image, but will disregard the transparency factor.

Here's an example on how a PNG image will appear in Internet Explorer and in Firefox.

PNG image using the <IMG> tag in Internet Explorer		PNG image using the <IMG> tag in Firefox

So just how do you display PNG image in Internet Explorer?

Well, to display a PNG image properly in Internet Explorer, you need to use CSS. Below is a sample code on how to display a PNG image in Internet Explorer.

<DIV ID="myDiv" STYLE="position:relative; height:250px; width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='myimage.png',sizingMethod='size');"></DIV>

The same PNG image. The above is called using AlphaImageLoader(). The bottom is called using <IMG> tag.

So you see, the <IMG> tag isn't being used. Instead, you see the <DIV> tag, with the STYLE parameter. And in the STYLE parameter, you have:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='myimage.png',sizingMethod='size');

As you can see, there's a value which contains myimage.png which is the path to the PNG image that you want to display. It's as simple as that.

But now, here's another problem. If you use the <IMG> tag in all other browsers and the AlphaImageLoader in Internet Explorer � how do you make your code compatible for all browsers?

For that you need to use some Javascript script code to identify which browser the visitor is using, so you know which code to use. I call this part the browser detector. After identifying the browser, you dynamically generated the required HTML code using Javascript document.write() method.

Hmm � sounds complicated? Well, I have to give credit to AListApart.com for this.

If you really want to know how it's done, then read this article:

http://www.alistapart.com/articles/pngopacity/

Is that all?

Nope � just a few more things. You still need to know how to make the image float on top of your web page. You still have to make the pop-up clickable. And also you have to make the pop-up close away when visitors click the X (close) button?

To float your pop-up, again, you'll need to use CSS. To do that, you need to put the PNG in a <DIV>. Then you just apply some CSS formatting using the POSITION, LEFT and TOP. In the web designer's world, this is what they call layering.

Here's a simple example on how you can do this.

<DIV STYLE="position:absolute; left:100px; top:100px;"><IMG SRC="http://mydomain.com/myimage.png"></DIV>

You can change the value of the 100px to anything that you want. By doing that, you are changing the location on where the <DIV> will appear.

Here's a cool tutorial over at BrainJar.com on CSS positioning and layers.

http://www.brainjar.com/css/positioning/

Now, when you are done with that, how do you make the pop-up the close button to work? You need to be able to make the pop-up disappear when somebody clicks the X (or close) button.

For this part, you need to understand a little bit more about CSS and Javascript. With CSS, you can show and hide a certain item. And with Javascript, you can change the CSS formatting for a specific item after the page has loaded.

With that, you can program to hide your pop-up when the visitor clicks on a certain area. You can use IMAGEMAP, or simply create a small X image and use the ONCLICK parameter to call the required Javascript function. In my case, I put a simple Javascript command in the HREF of the <A> tag. And this little thing, I float it again over the pop-up. Here's how the code looks like.

<a href="javascript:Close()"><img src="http://mydomain.com/pop/x.gif"></a>

And of course, I already have defined the Close() function. And I layer the x.gif image on top of the pop-up graphic.

Here's an awesome tutorial that you can read if you really want to understand this.

http://www.interactionarchitect.com/articles/toggle.htm

Hmm ... just one more thing ...

It's about making the pop-up clickable. There's a bit of a problem with this when it comes to Internet Explorer. If you noticed, with Internet Explorer, we didn't use the <IMG> tag. We only have a layer using the <DIV> tag. To make it clickable, I would put a transparent single GIF image over it, and size to the same height and width of the PNG image.

To give you a clear picture, I hope this diagram can explain it (in the case with Internet Explorer)

Now, all the above has to be programmed into your browser detector script, the one that identifies browser type.

My script only requires me to add only one line of code to my HTML code. It's something like below.

<script src="http://mydomain.com/pop/pop.js"></script>

And that it all.

If you understand Javascript and server-side programming (like PHP), or can get a programmer to do it for you, you can do a lot more. You can define how many times the pop-up should appear. You can cookie your website visitor. You can rotate the a few WOW! pop-up to appear at random.

Anway, if you'd like to have this code and the PNG graphic to the pop-up, just enter your name and email below. I'll send the whole package to you in email. I have to say that it is just a basic WOW! Pop-up code. But it'll work.

And if you worry about not being able to make everything work, don't worry, I've created a tutorial video to show you how to put everything together step-by-step. There's also a video on how to customize the pop-up graphic with your own messages.

YES! I want the FREE code and pop-up graphic!

I hope you register yourself and download my FREE WOW Pop-Up package.

Alright now - Have fun ...