Graphics operations (overlaying images)

[akiraplt]

Hey there,

We're working on a piece of javascript to overlay images so that things fit in a certain configuration. However, we can't seem to identify the way to have one image overlay the other.

Here's a good example. I have two puzzle pieces on a page. I want to be able to click on piece into the other, e.g., have the male tab of one fit the female notch in the other.

1. How would you guys go about this graphical trick? and 2. how might you ensure that the pieces fit neatly?

Any suggestions are awesomely appreciated, thanks!
--Dave

 

[trollacious]

Absolute positioning and transparent GIF/PNG images. The part that interlocks with other images is transparent around the interlocking area.

Lee

 

[BillyRayPreachersSon]

Incidentally, if you want nifty drag/drop effects for a jigsaw game, check out the script.aculo.us effects library here:

http://script.aculo.us/

It might give you some ideas, or it might be that you end up using it.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]