How To Create A Photorealistic Post-It Style Pop Over
Skip | 26 November, 2005 18:39
Have you seen one of those post-it pop-up? The one that looks so realistic, with awesome shadow effect. If you don't know what I am talking about, try opening the following website:
http://wowpopup.com/
They look awesome don't they?
And something like this is always good for your web marketing campaign. One reason, it never gets blocked by pop-up blockers. And another, it really grabs the attention of your web visitors.
This is good when you want to increase subscription rate to your ezine, or promote an affiliate program, or even increase sales.
But you wonder, how do they do it? You thought that you can achieve similar result, and you try, and try, and try.
You have tried GIF image, JPG image, none of those can get the job done like this.
There's one thing that you just don't know. Many pro web programmers know this, but not the normal web designers. Most web designers don't know how to do this.
The secret is in PNG image format.
PNG image format is the little-known image format that you can use on the web. The PNG image format is unique because you can do the "Alpha" effect with it. The Alpha effect is where you set transparency factor on certain areas on the PNG image. That is what makes the shadow effects look so real.
With the Alpha effect, you can set transparency factor from 0% to 100%. So it can be 30% transparent, 50% or even 79%. Have a look at the pop-up again, and take a close look at the shadow. Now you partially know how it's done.
But there is just one problem - Internet Explorer doesn't really support PNG image format. While you can still call PNG image format using the IMG tag, Internet Explorer ignores the Alpha factor. In Internet Explorer, PNG images just don't appear properly.
So how do you solve this? Luckily you can still call PNG image in Internet Explorer and have the Alpha reflected using a special CSS command. It's the AlphaImageLoader() command.
Unfortunately, this will lead you to another problem. Before you can call the PNG image, you first need to identify the browser your web visitor is using. If the visitor is using Firefox, Opera, Netscape or any others, you can call the PNG using the IMG tag. But if it's Internet Explorer, you need to use the AlphaImageLoader() CSS command.
And of course, this can always be solved with a bit of Javascript. And with a little more Javascript and CSS, you can have the PNG image floating over or on top of your web content. You can even make the pop-up disappear using the OnClick event trigger.
If you'd like a complete code and PNG image to your own photorealistic post-it pop-up, try visiting WOW Pop-Up. Below is the URL address for WOW Pop-Up where you can get a free set of the code and the PNG graphic.
Now once you have this little beauty, you need to decide the message and best method of using it. We suggest using it to subscribe visitors to your newsletter, drive them to a certain sales page or even to a sales program that you are an affiliate for. There are dozens of uses of this great technology, so give it a try and remember: measure everything you do so you know how to improve on it!
About The Author: Iszuddin Ismail published the WOW Pop-Up and is giving away free code and PNG graphics to your own photorealistic post-it pop-up. Get a set of four PNG pop-up graphics for free. http://WOWPopUp.com
http://wowpopup.com/
They look awesome don't they?
And something like this is always good for your web marketing campaign. One reason, it never gets blocked by pop-up blockers. And another, it really grabs the attention of your web visitors.
This is good when you want to increase subscription rate to your ezine, or promote an affiliate program, or even increase sales.
But you wonder, how do they do it? You thought that you can achieve similar result, and you try, and try, and try.
You have tried GIF image, JPG image, none of those can get the job done like this.
There's one thing that you just don't know. Many pro web programmers know this, but not the normal web designers. Most web designers don't know how to do this.
The secret is in PNG image format.
PNG image format is the little-known image format that you can use on the web. The PNG image format is unique because you can do the "Alpha" effect with it. The Alpha effect is where you set transparency factor on certain areas on the PNG image. That is what makes the shadow effects look so real.
With the Alpha effect, you can set transparency factor from 0% to 100%. So it can be 30% transparent, 50% or even 79%. Have a look at the pop-up again, and take a close look at the shadow. Now you partially know how it's done.
But there is just one problem - Internet Explorer doesn't really support PNG image format. While you can still call PNG image format using the IMG tag, Internet Explorer ignores the Alpha factor. In Internet Explorer, PNG images just don't appear properly.
So how do you solve this? Luckily you can still call PNG image in Internet Explorer and have the Alpha reflected using a special CSS command. It's the AlphaImageLoader() command.
Unfortunately, this will lead you to another problem. Before you can call the PNG image, you first need to identify the browser your web visitor is using. If the visitor is using Firefox, Opera, Netscape or any others, you can call the PNG using the IMG tag. But if it's Internet Explorer, you need to use the AlphaImageLoader() CSS command.
And of course, this can always be solved with a bit of Javascript. And with a little more Javascript and CSS, you can have the PNG image floating over or on top of your web content. You can even make the pop-up disappear using the OnClick event trigger.
If you'd like a complete code and PNG image to your own photorealistic post-it pop-up, try visiting WOW Pop-Up. Below is the URL address for WOW Pop-Up where you can get a free set of the code and the PNG graphic.
Now once you have this little beauty, you need to decide the message and best method of using it. We suggest using it to subscribe visitors to your newsletter, drive them to a certain sales page or even to a sales program that you are an affiliate for. There are dozens of uses of this great technology, so give it a try and remember: measure everything you do so you know how to improve on it!
About The Author: Iszuddin Ismail published the WOW Pop-Up and is giving away free code and PNG graphics to your own photorealistic post-it pop-up. Get a set of four PNG pop-up graphics for free. http://WOWPopUp.com
Comments for post
Menu
calendar
| « | September 2008 | » | ||||
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | ||||
RSS Feed