HowToSell.info

by Robert Plank
————————–

There’s a very easy way to create instant attention, unblockable “popups” that aren’t popups that don’t look like popups and technically aren’t popups at all. They don’t even require JavaScript. They also don’t require an obscene monthly fee.

This is what they look like:
http://www.salespagetactics.com/ImagePopup

All you have to do is create a graphic, then in your HTML editor create an HTML layer (DIV tag), with no border and no background color, then drag the layer to where you want it.

The way they make the graphics look as if they stick out of the page is they don’t have any background on the graphics (they’re transparent)

Just go to a graphic designer, tell them you want a (realistic) picture of a post-it note, tell them the text you want on it, pay the $10 or whatever to have it done. Even better, write something by hand on a post-it note, put in it a scanner, open the graphic with Paint Shop Pro or Photoshop, use the eraser tool to remove anything (even whiteness) around the post-it, save it as a transparent GIF.

Then put it into HTML code like this:

[div id=”popup” style=”top:300px; left:300px; border:none; z-index:2; padding:0px; position:absolute;”]
[img src=”post-it.gif” border=”0″]
[/div]

(IMPORTANT: If you know HTML, you’ve noticed I’ve had to substitute “[” and “]” in place of HTML brackets. When you actually use this HTML code, change the “[” to the less-than symbol — hold shift and press the comma key. Change the “]” to the greater-than symbol — hold shift and press the period key. Thanks.)

Look in the “style” parameter of the DIV tag.

Change the number after “top” to the number of pixels you want the popup placed from the top of the page.
Change the number after “left” to the number of pixels you want the popup placed from the left of the page.

(Leave the “px” after these numbers.)

Change the “post-it.gif” to the actual filename of your post it image.

You know how I said these popups don’t require JavaScript? I half lied. They DO require JavaScript if you want a close button, which is easy to add.

We do this by creating what’s called an image map. Let’s call our image map “popupMap.”

[map name=”popupMap”]
[/map]

Inside these map tags we add “area” tags, which define clickable parts of our image.

On that popup image, either add an “X” in the top right corner or write the word “Close” underneath your message on the popup.

If you’re using Photoshop: Open your image, and choose the Info palette by going Window -] Info. Notice how when you move your mouse cursor over the image, the numbers in the Info palette change.

If you’re using Paint Shop Pro: Simply move the cursor over the image and you should be seeing X and Y values in the bottom right corner of your screen.

Now we’re going to pretend to draw a box around the place our “close” link is going to be. Hold the cursor over where the top left corner of the close link will be. Look at the X and Y numbers. Write these down, separated by a comma.

So if my info palette said:

X:17
Y:223

Then I would write: 17,223

Now hold the cursor over the top right corner where this box should be. Right these 2 numbers down, right next to the previous ones. So if you see:

X:257
Y:255

And the numbers you have written down on that piece of paper should look like:
42,23,289,53

You just keep adding to it. Write down the X and Y’s for the bottom right corner, and finally the top left corner.

So you should have something like: 17,223,257,255,255,299,11,267

You have all the info you need for that close button. Add this code INSIDE that [map] tag:

[area shape=”polygon” coords=”17,223,257,255,255,299,11,267″ href=”javascript:void(0);” onclick=”javascript:document.getElementById(’popup’).style.visibility = ‘hidden’;”][/area]

So your whole [map] tag looks like:

[map name=”popupMap”]
[area shape=”polygon” coords=”17,223,257,255,255,299,11,267″ href=”javascript:void(0);” onclick=”javascript:document.getElementById(’popup’).style.visibility = ‘hidden’;”][/area]
[/map]

Finally, we have to tell the IMG tag to use this image map. We have to add a “usemap” parameter to the tag like this:

[img src=”post-it.gif” usemap=”#popupMap” border=”0″]

Again, make sure “post-it.gif” is the name of your image.

Save everything, refresh, and make sure the image disappears when you click on that close area.

We also need to make the main text of the popup clickable if someone decides they like your offer.

Do the same tracing thing as before, only do it with the main text of your popup instead of the close button. Make sure this area and the close button do NOT overlap.

Write down the numbers as before, so if your new coordinates were: (43,23), (289,53), (259,251), and (21,217)…

Then you would write: 43,23,289,53,259,251,21,217

Put that into an “area” tag and place it underneath the other area tag, so your whole page should look something like:

[div id=”popup” style=”top:300px; left:300px; border:none; z-index:2; padding:0px; position:absolute;”]
[img src=”post-it.gif” border=”0″]
[/div]

[map name=”popupMap”]
[area shape=”polygon” coords=”17,223,257,255,255,299,11,267″ href=”javascript:void(0);” onclick=”javascript:document.getElementById(’popup’).style.visibility = ‘hidden’;”][/area]
[area shape=”polygon” coords=”43,23,289,53,259,251,21,217″ href=”http://www.example.com”][/area]
[/map]

If you don’t want to do all that work, just supply the above HTML code to the graphic designer who created that post-it image for you and tell them to fill in the X and Y coordinates for the close button in that first “area” tag and the X and Y coordinates for the main offer in the second “area” tag.

Congratulations, you’ve just saved yourself $10 a month ($120 per year) by creating image popups on your own, that will last forever and won’t disappear suddenly if the service hosting these popups decides to close up shop.

Want More Cool Tips Like These?
Writing & Designing A Site Is Only 75% Of The Work…
At Last, You Have At Your Disposal A Manual Full Of
Drag-And-Drop Solutions For Sales Pages
And The Special Offers You Run On Them
http://www.salespagetactics.com

This entry was posted on Friday, September 2nd, 2005 at 11:53 am and is filed under Copywriting. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.