Distorted hotspot shows a thin black line around

Hello,

Thank you very much in advance for helping.

I've got the following virtual tour:

Find the hazards

Basically you need to click in the hazards and after that the hazard is either fixed or removed.
You can test this by clicking the hose on the floor, next to the big box filled with metal bits.

In order to achieve this I add several distorted hotspots. In the case of the hose, I add 3 images:

http://clients.tourvista.co.uk/vt/mintra/st_f…rds/safe_46.png

http://clients.tourvista.co.uk/vt/mintra/st_f…ds/safe_46b.png

http://clients.tourvista.co.uk/vt/mintra/st_f…ds/safe_46c.png

They're 1000x1000px PNG-24 with transparency.

You can see the XML file here
See underneath a little summary of the actions I use to add the images:

...        delayedcall(2, add_safe(%1); adjust_safe(%1));...
    <action name="add_safe">        addhotspot(safe_%1);        set(hotspot[safe_%1].alpha,0);        set(hotspot[safe_%1].ath,);        set(hotspot[safe_%1].capture,false);        set(hotspot[safe_%1].distorted,true);        set(hotspot[safe_%1].enabled,false);        set(hotspot[safe_%1].handcursor,false);        set(hotspot[safe_%1].keep,false);        set(hotspot[safe_%1].url,%HTMLPATH%/files/images/hazards/safe_%1.png);        set(hotspot[safe_%1].visible,false);        set(hotspot[safe_%1].zoom,false);        set(hotspot[safe_%1].zorder,0);    </action>
    <action name="adjust_safe">        ...        if (%1 == 46, hs_l(46); add_safe(46b); hs_f(46b); add_safe(46c); hs_d(46c));        ...    </action>
    <action name="hs_f">  set(hotspot[safe_%1].ath,0);   </action>    <action name="hs_d">  set(hotspot[safe_%1].atv,90);  </action>

As you can see the problem is that there is a thin black line around each image.

I tried save the images in a different shape, format, and smoothing the edges, but nothing worked.

Any ideas how can I remove that line?

Update:

I managed to to get rid of the black line by using:

set(hotspot[safe_%1].renderer,css3d);

Everything looks great in Chrome, but in Firefox some of the hotspot images disappears when they touch the edge of the browser.

I understand that's a well know Firefox CSS3D rendering bug, so there is nothing I can do abut it. Back to the original problem, the black thin line.

Thanks!

Thanks for your quick reply Klaus

I was afraid you were going to point to the method explained in that post

You're correct. The way I do it is a waste, but It was done long time ago. The client has requested to update the virtual tour to make it work 100% in HTML5 and I was hoping that I could do that without re-writing the way it works.

It seems that I don't have any other choice though.

Thanks,

Rafael

Thanks for your help.

At the end I decided to use your distorted hotspot technique, which wasn't that hard at all.

Cheers