My side of the world and story

Sponsored By
Contributors
Below are readers who have donated to me as a thank you token. If you feel that my post are worth reading, please donate to me at any amount. Thank you.
  • Markp-R
  • Kathy M
  • Russell Gumns
  • Sazali Hassan
  • Evil Monkey
  • Link to me

    Book i read.
    Stats
    Friday, December 23, 2005
    Don't pay for a POPUP--Get it FREE!
    Yesterday i decided to code my popup and this morning about 40 emails asking me how i made it. So today i'll give you my tip how to make your own popup for free. But before that, this is not a blockable popup and it will by-pass your popup blocker.

    My popup is not a popup but a half popup. Sound confusing? Not really, because this is not like any popup using pure javascript. I only use a simple code that can be understand by major browser. To make this popup, you need to prepare several things first.

    1. Image editor - Any image editor that supports transparent image such as GIMP, Photoshop etc. I use GIMP as my main image editor.
    2. Image hosting - Any free image hosting can be use such ImageShack, PhotoBucket etc.
    3. Some HTML knowledge.

    First step is your image. Create a new file and set it to transparent. I use a 290x310 pixel transparent image. To make thing easier for use, just copy my image and edit it to suit your needs. The reason i use transparent image was so i can create a shadow beneth the main image ( i don't make a shadow but you can add a shadow if you like ) so that users can see what is behind the main image. After you have created your transparent image, save it and move to the next step. Don't forget to upload your image to your server.

    We're going to create the HTML code for your popup, so pay attention this going to be bit confusing. The code going to look this below:

    <div id="popup" style="position:absolute; left:200px; top:200px; padding:0px; z-index:2;">
    <img src="Your_Image_Is_Here.gif" usemap="#popupMap" border="0">
    </div>
    <map name="popupMap">
    <!-- Edit the line below -->
    <area shape="polygon" coords="17,223,257,255,255,299,11,267" href="javascript:void(0);" onclick="javascript:document.getElementById('popup').style.visibility = 'hidden'; document.getElementById('shadow').style.visibility = 'hidden';">
    <area shape="polygon" coords="43,23,289,53,259,251,21,217" href="URL_Here">
    </map>
    <!-- End Pops -->


    Notice the Edit the line below? That is where your coordinates for the image. Dont forget to replace the Your_Image_Is_Here.gif with your real transparent image that you have uploaded. Let us take a look at the code for coordinates shall we.
    <area shape="polygon" coords="17,223,257,255,255,299,11,267" href="javascript:void(0);" onclick="javascript:document.getElementById('popup').style.visibility = 'hidden';


    Open your image editor and you can find the X and Y for your image. We will use these X's and Y's. For Photoshop users, notice the X's and Y's from your main interface? We will move to the next step.


    Now that you are ready with your image editor, it's time to get the coordinates. Imagine you going to make a box and notice the X's and Y's are moving when you move your mouse? That is the coordinate that you going to use. Place your mouse and write down the X and Y. Continue with all the coordinates. These coordinates are for your upper text. I use this for my "Attention....Show me Now" The code for this step is :
    <area shape="polygon" coords="17,223,257,255,255,299,11,267" href="javascript:void(0);" onclick="javascript:document.getElementById('popup').style.visibility = 'hidden';


    Make sure you start from Top Left > Top Right > Bottom Right > Bottom Left.


    Do the same thing for your Close coodrdinates. As for me is just put a close text. When someone clicks on it, the popup will close. Don't forget to replace the URL_Here with your real URL.

    <area shape="polygon" coords="43,23,289,53,259,251,21,217" href="URL_Here">


    Enjoy your own popup. You just save $10 or more from using a paid popup service. Did you just said you have been rip-off? This is the same method paid popup are using but i just spill out their secret to the public. Put the code after your <HEAD> and before the close tag. The finish code should look like this :

    <div id="popup" style="position:absolute; left:200px; top:200px; padding:0px; z-index:2;">
    <img src="Your_Image_Is_Here.gif" usemap="#popupMap" border="0">
    </div>
    <map name="popupMap">
    <!-- Edit the line below -->
    <area shape="polygon" coords="17,223,257,255,255,299,11,267" href="javascript:void(0);" onclick="javascript:document.getElementById('popup').style.visibility = 'hidden'; document.getElementById('shadow').style.visibility = 'hidden';">
    <area shape="polygon" coords="43,23,289,53,259,251,21,217" href="URL_Here">
    </map>
    <!-- End Pops -->


    Before i forget, i would like to wish my readers a Happy Xmas and stay safe during holiday seasson. If you like my popup tip, you can use it for your blog or website but please give me some credits.

    posted by Jamloceng @ 1:46 PM  
    About Me
    Author: About me
    Contact: me
    FeedBurner:
    Add to: Yahoo
    Subcribe to: Newsgator
    Subcribe to: Rojo
    My: NewsBurst
    Disclaimer: Creative Commons
    Previous Post
    Archives
    Links
    As seen on


    SOB