How do I make a paypal BUY link work with an imagemap?

Hi

I have made an imagemap using Fireworks that has a “buy Now” option.

I cant figure out how to make the imagemap work with a paypal code so that the relevant section of the map triggers the code.

the site is http://theultimatetechsite.com/test-page/backgrounds/ (right hand sidebar)

The imagemap looks like this:
Pastebucket - The #1 paste tool!

The paypal code looks like this:
Pastebucket - The #1 paste tool!

I figured the thing to do would be to make the code a separate entity and have the image map trigger that? - I dont know hot to make it work though.

Can anyone tell what the steps are to make this work?

Jim

I don’t think it’s possible to include a form submit as part of an imagemap, but you could do this…

Add an ID attribute to the form


<form id="pp" action="https://www.paypal.com/cgi-bin/webscr" method="post">
.
.
.
</form>

Then add an onclick handler to the part of the image map that submits the form.


<area onclick="document.getElementById('pp').submit()" shape="poly" href="#" coords="..." /> 

Naturally, you should follow all warnings that this now relies on JS and a user that has it disabled (do ppl really do that?! :)) won’t be able to use that option.

Thanks for that.

So atm, the code for the imagemap is sitting in wordpress in a TEXT widget. I can see how to add the ID attribute, and I think I get how to modify the imagemap. So do I then just put the two pieces of code together in the TEXT widget to make them work?

You should be able to put the PayPal form (with the newly added id attribute) anywhere in the WP TEXT widget since it is all hidden values. I would put it below your imagemap.

Then, in the part of the imagemap that you want to submit them form, add in the onclick

 onclick="document.getElementById('pp').submit()"

Another thought…the PayPal code may contain an image button. You will want to comment that section out since you don’t want that to display on your page.

I had this exact same problem, a paypal button in the middle of an image map. Your solution worked perfectly.

Thanks!

Glad to hear that! :slight_smile: