Custom Rollover Image for PayPal Button - REVISED!

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

Post Reply
User avatar
Posts: 90
Joined: Sun Dec 30, 2007 2:43 am
Location: Florida, USA

Custom Rollover Image for PayPal Button - REVISED!

Post by gofrank » Thu Aug 08, 2013 4:39 pm

The steps below have been revised to make working with rollover PayPal buttons easier. (Changes in blue).

One of the best ways to convert shoppers into buyers is to have your "buy now" or "donate" button act as a rollover button. Some claim having a rollover image for purchase/donation increases clicks by 40% or more. PayPal does not (at this writing) provide this ability. But with WB and a little code work, it's possible to create this effect yourself.

Here are the steps:
  1. Create two images identical in size for your custom button. One represents the "off" or normal image, the second is the "on" image visitors will see when the mouse pointer is over the button.
  2. Create your PayPal button as you normally would in Web Builder. Choose "Custom" as the image type and specify the "off" image you created in Step 1.
  3. Create an HTML box. I recommend changing the ID to something like "buy-button" so you can locate it easily. Select the HTML box and set the size equal to the size of the PayPal button. This is not absolutely necessary, but it helps in visualizing the position of the button on the page.
  4. Right click the HTML object and select "Object Properties" from the context menu. On the Properties dialog under "Type", select "Use <div> to set position and size of the HTML" from the drop down box. This is very important!
  5. Right-click the PayPal button and select "Object HTML" from the context menu. Select ALL of the code and then press Ctrl - C to copy it, then close the dialog.
  6. Right-click the HTML object and use Ctrl - V to paste the code you copied from the PayPal button. This duplicates the PayPal button's functionality.
  7. In the code you just pasted, locate this line (at the end of the code block):

    Code: Select all

    <input type="image" name="submit" src="images/buynow-off.png" style="position:absolute;left:0px;top:0px;" alt="Make payments with PayPal, it's fast, free, and secure!">
  8. Immediately after src="images/buynow-off.png" add the following:

    Code: Select all

    onmouseover="this.src='images/buynow-on.png';" onmouseout="this.src='images/buynow-off.png';"
    substituting the file names of the custom images from Step 1. (Note that the "images" folder may be different, depending on how you have set up your options in WB. Be sure to use whatever path is showing immediately after "src=" in the original PayPal button code.)
    The full line should now appear as:

    Code: Select all

    <input type="image" name="submit" src="images/buynow-off.png" onmouseover="this.src='images/buynow-on.png';" onmouseout="this.src='images/buynow-off.png'; style="position:absolute;left:102px;top:0px;" alt="Make payments with PayPal, it's fast, free, and secure!">
    The key change is: src="images/buynow-off.png" onmouseover="this.src='images/buynow-on.png';" onmouseout="this.src='images/buynow-off.png';
    Note the mouseover/mouseout sections each end with ';" (a single quote, semicolon, and double quotes). Make sure you get the syntax correct or the code will not execute.
  9. Move a couple of lines up until you find this line:

    Code: Select all

    <div id="PayPal1" style="position:absolute;left:577px;top:295px;width:165px;height:64px;">
    This line controls the positioning of the button (your numbers may be different). But now we're going to let the HTML <div> handle the positioning for us. Change the left and top values ONLY to:
    left:0px;top:0px; Leave all other numbers as they are.
  10. Position the HTML object on the page as desired.
  11. Select the original PayPal button and delete it. (As a safety precaution, you might want to paste a copy of the button on a separate non-publishing page in case you later need to make edits.)
  12. Create a file publisher object on the page. In the file publisher, create a new folder that matches the name of your image folder in WB.
  13. Add both the rollover images you created in Step 1 to the image folder of the file publisher. This is needed as WB doesn't "know" those images are being used and won't be able to display them unless they are added to the image directory of the site by the file publisher object.
  14. Upload your page (all files) and test.
The changes in blue allow you to move the button wherever you want on the page (and even copy and paste it to another page) and WB will update the position automatically through the <div>.

To see the effect:
Billing clients for your freelance work? Try Minute-2-Minute, the project management, timing, and billing system. Perfect for web developers who charge by the hour. FREE 45-day trial.

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests