overlapping javascript rollover images problem

overlapped images are cut off where they intersect

[sivatag]

i am helping to build a web site for an artist friend. he wants to have a vertical column of buttons which lead to different parts of his online gallery and for each button to display a thumbnail image of a drawing off to the right side of each button when it is moused over. however, due to larger size of the thumbnails which overlap each other, the images are cutoff where they intersect when the user mouses over the buttons. i sliced each button and its image separately in photoshop. is there a way to keep each image intact without having to move them sufficiently far apart so that they don't overlap? only one shows at a time when the mousing takes place, but each one only shows the nonoverlapped portion of itself.
thanks for any help.

[phranque]

maybe you should change visibility/transparency/z-axis or something when the onmouseout event occurs.

[sivatag]

i don't know anything about how to do this, could you suggest your favorite online or offline resource to bring me up to speed? or, does someone have a code snippet example to show basically how it's done?
thanks again.

[phranque]

perhaps you could post the code you are using for the onmouseover event.
how you turn things on usually helps determine how you turn them off.