Development
 Client Side

     

hey guys, is it possible to use paypal’s buy now button generator code and give it a css valid rollover? normally i do rollovers like this:

#navButton {
     position: absolute;
     width: 200px;
     height: 80px;
     margin-top: 0px;
     margin-left: 0px;
     z-index: 2;
}

a.navButton {
     display: block;
     width: 200px;
     height: 80px;
     outline: none;
     background-image: url(../images/navWeek.jpg);
     background-repeat: no-repeat;
     background-position: 0px 0px;
     z-index: 2;
}
     
a.navButton:hover {
     background-position: 0px -80px;
     z-index: 2;
} 

the paypal generator gives you this code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
     <input type="hidden" name="cmd" value="_s-xclick">
     <input type="hidden" name="hosted_button_id" value="blah blah blah">
     <input type="image" src="http://www.yoursite.com/navButton.jpg" name="submit" alt="">
     <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif">
</form> 

i tried a bunch of different ways and couldn’t figure out how to make that button hover! any help would be greatly greatly appreciated. thanks! smilie

  4 REPLIES
 
Nutrox
1  
Nutrox

You could take the button input element out of the form and create a standard link to submit the form.

<a id="ppbutton" href="#" onclick="document.getElementById('ppform').submit();return false"></a> 

Just give the form a ppform ID. Normally I wouldn’t have the JS on the link like that but hey-ho.

smilie

  • 18 April 2009 11:40 AM
    •  
midnite Author 
2  
midnite

sweet! thanks dude, worked like a charm. i was trying to put a hover class on the image with no luck.

this worked:

<div id="navButton">
    <form id="ppform" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="blah blah blah">
    <a class="navButton" href="#" onclick="document.getElementById('ppform').submit();return false"></a>
    </form>
</div> 

thanks again good

  • 18 April 2009 12:06 PM
    •  
midnite Author 
3  
midnite

by the way, any idea what this does?

<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> 

the paypal generator adds that in, but i can’t see what it’s purpose would be other then as a tracker of sorts to see how many times that gif has been downloaded? just want to make sure it’s safe to remove that.

  • 18 April 2009 12:10 PM
    •  
Nutrox
4  
Nutrox

I have no idea what that does to be honest but I imagine it is some kind of tracker as you mentioned. The only thing I can suggest is commenting it out and testing the form through PayPal’s sandbox if you are using one, if everything works properly then I guess there is no harm removing that image (it doesn’t get sent with the form anyway).

  • 18 April 2009 12:55 PM
    •