Here is one example for you:


and code:


That mean: crop me the image starting from pix 0,0 by width and height of 60px for normal state, and when mouse onover than crop the same width and height but start from 0,60.

With this and explanation from here I think you will get it:
http://krpano.com/docu/xml/#plugin.crop

Short version: crop="x-position|y-position|width|height"
regards
Umalo

place only on button at start and when clicked turn it off with
set(plugin[on_button].visible,false);
set(plugin[off_button].visible,true);
and turn on the next off_button on same position

set(plugin[on_button].visible,true);
set(plugin[off_button].visible,false);

Take a look at examples: There is e.g. Fullscreen button that behaves exactly what you want. Two buttons created. Only one is visible at the moment. Every button has own action that is calling.

<layer name="openfs" url="buttons.png" align="left" x="280" crop="280|0|40|40" onovercrop="280|40|40|40" ondowncrop="280|80|40|40" onclick="set(fullscreen,true);" visible="true" />
<layer name="closefs" url="buttons.png" align="left" x="280" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onclick="set(fullscreen,false);" visible="false" />

In this example buttons are turned on/off based on events:

<events name="buttonevents" keep="true"
onxmlcomplete="if(istouchdevice, set_drag_cursor(), set_qtvr_cursor() );"
onenterfullscreen="set(layer[openfs].visible,false); set(layer[closefs].visible,true);"
onexitfullscreen ="set(layer[openfs].visible,true); set(layer[closefs].visible,false);"

You can turn them in your onclik layer events.
I don't know how else to explain. Try by your self. If stuck come with your code (online would be great) example to give you more guidelines.