krpano example- hover effect

Hi
how are effects like in this example made?
https://krpano.com/tours/weingut/

i mean the effect of open/close doors

if i want to use same effect in my virtual tour, how to do it?
do i need to make 2 panorama photos- with opened and closed doors?
i would also like to see some source code of using that effect
thanks

but i still dont understand what changed the color of the water in your post? he did all the things with blue pool, then he exported it, and then he changes blue color to green in graphic editor?
and what to do next? how to use this changed photo in panorama? only link it in hotspot?

i made panorama with closed door, i used this to make virtual tour, now i have to edit the whole panorama which i will make with open door? or edit just the photo that contain open doors?

sry for english and this noob questions, but im newbie

thank for explain, i will try

its almost good, but i have again some questions
i did everything like in the tutorial, but the final door image was too stretched when used as hotspot

what i dont understand- tutorial, 2 part- i used the sliders to have only needed area, but i dont know what numbers and where to write, because after i moved sliders, that numbers were there already, and if u used that numbers in the tranformation function in krpano, the hotspot image was completely out of position

panorama with closed doors http://imgur.com/AowDKaD
panorama with opened doors http://imgur.com/sTJZ9Rw
cropped doors http://imgur.com/5X44AlM
krpano without recalculation function http://imgur.com/Y0wjhkH
krpano with recalculation function http://imgur.com/KSmvaBi

also, when i click on this hotspot, nothing happens even though the names match

<hotspot name="spot1" url="panos/dvereptgui.jpg" ath="4.646" atv="2.412" linkedscene="scene__Group_0_-GOPR0611_GOPR0615-5_images_0000"
keep="false"
zoom="true" distorted="true"
width="316" height="448"
scale="1.2597138310354041" scale9grid="" scalechildren="false" rotate="0"
rx="0" ry="0" rz="-0.026108532505666214"
edge="center" ox="" oy=""
crop="" ondowncrop="" onovercrop=""
visible="true" enabled="true" handcursor="true" capture="true" children="true"
zorder="0"
onloaded="calc_pos_from_hfov_yaw_pitch_roll(29, -5,3569, 4,1233, -0,4554);"
alpha="0" blendmode="normal" smoothing="true"
refreshrate="auto"
onover="set(hotspot[spot1].alpha,1.0)"
onhover=""
onout="set(hotspot[spot1].alpha,0)"
flying="0"/>

oh, thx, now its better, but it still doen not fit like it should

http://imgur.com/RDxRzmy

nice examples
my pano is made in spherical mode, but it is not 360/180, just 360/120 or so
so what i need to do? should i use other pano mode?-flat?cylindircal?
im not able to use full kit that would allow me to shoot 360/180, i can try it withour , but it will be more difficult i guess
or should i just remove this thing from my virtual tour?

Quote from panomaster

Here's mine:

http://ai360.pl/projekty/ikea3/

Panoramas 4, 8, 9, 11, 12, 13, 15, 18 have "hand" hotspots. Just drag and drop it.

that 4th panorama, you did it the same way like im trying? or some other, more professional way?

thank you, i send you pictures
btw im stitching them in kolor autopano giga, because of best results with stitching
i tried to add nadir and zenit, but i dont have photos so i added there some photos with logo=now it should be 360/180 spherical panorama photo

this is how it looks after last changes
http://imgur.com/Jc9EciV

now this effect works for me, but i cant set linked scene
if i use linkedscene="scene" attribute, nothing happens, and i have to use onclick="loadscene... , but there is not that flying in effect
can anyone help me? thx