Strange Mouseover behaviour - Bug?

[leemcg]

I don't get pixel perfect mouse overs in your 1st file, it works as a rectangle surrounding the diamonds. For example mouse in from well outside any shape, an obvious area of no hotspots, but deliberately aviod actually mousing over any of the coloured diamonds but over an imaginary rectangle that surrounds the diamonds (i.e. The areas with transparent rectangles in my image above) . They trigger the url action.

That's curious. I can definitely move my mouse a couple of pixels around the diamonds and nothing happens. Maybe it's a browser thing. I'm only using IE 6 here at work, but I'm sure I've seen essentially the same behaviour on Opera at home.

I guess that makes it hard for you to observe the more worrying effect I am describing! But thanks for trying anyway.

Regards
Lee

[covoxer]

Hi Lee,

The problem seems to be caused when the pop-up layer is on top of the mouse over area, then the mouseover area is expanded to include the popped up bit.

Correct. This also includes multi level pop-ups (when you place mouse over object on the pop-up layer, which pops another layer up etc.). This is absolutely necessary bahaviour if you want to implement multilevel pop-up/drop-down menu or the like. The popped menu list is supposed to stay visible as long as you hover over it, not dissapear as soon as you leave the button that has activated it.
This is also true for any other kind of interactive pop-ups (containing any kind of link) as they would be useless othervise.

This means that a mouse position can cause different layers to be popping up depending on the previous movements of the mouse. This has been very confusing for the people I've had test the website so far.

Correct. You have to consider this in your design to avoid unexpected behaviour.

Am I going mad?

No.

Is this a bug?

No.

Is there any way around it?

Rework design if you don't like this.

If you have a mini photo, you want to mouse over to make it bigger, and you make it bigger on top of the mini-photo. You can no longer see the old photo, so where is the intuitive place to move the mouse to get rid of the large version - it's off of the large photo, not off of the small one you can't see.

Yes. You can also hide any pop-up simply clicking on it, no need to mouse out.

So I'm guessing it's deliberate.

Yes.

Maybe there is a hidden registry option to turn it off. Please....

Sorry, no.

[leemcg]

Hi Lee,
Correct. This also includes multi level pop-ups (when you place mouse over object on the pop-up layer, which pops another layer up etc.). This is absolutely necessary bahaviour if you want to implement multilevel pop-up/drop-down menu or the like. The popped menu list is supposed to stay visible as long as you hover over it, not dissapear as soon as you leave the button that has activated it.

Thanks for your input. Gets us there a lot quicker.

I guess it's pretty obvious from my design, that it's not possible to design around this feature. It strikes me that it might be possible to get dirty with the HTML and fix this.

Whilst I appreciate this design choice in Xara - in theory would it be possible to create HTML that works in the way I was expecting? (Before I spend ages trying to work it out, only to find out that there's no way around it).

Regards

Lee

[remi]

I would recommend to use Flash for your house map. You could use Xara Xtreme to export two SWF files (normal drawing and mouseover drawing) and import them into Adobe Flash.

Regards,
Remi

[leemcg]

I would recommend to use Flash for your house map. You could use Xara Xtreme to export two SWF files (normal drawing and mouseover drawing) and import them into Adobe Flash.

Regards,
Remi

Thanks for the suggestion Remi, but having downloaded the trial version of Flash CS3, it appears much to complicated for me to learn, just for this one bit of the website - not to mention expensive if it turns out I can't do the whole thing in the trial version.

I will have a look this evening all the same.

Regards
Lee

[covoxer]

Hi Egg,

Perhaps John can tell us is it possible to have a non rectangular hotspot?

No, there's no way to set non rectangular shape for mouse over testing with the HTML export currently. It requires imagemaps. Present version of the HTML export filter can not export image maps. But it is on the feature list to implement in future versions. So hopefully, it will be implemented one day.


Hi Lee,

Whilst I appreciate this design choice in Xara - in theory would it be possible to create HTML that works in the way I was expecting?

I'm not perfectly sure how exactly you expect it to work. But if you simply want the pop-up layer to hide as soon as a mouse pointer moves out of the object that has invoked this pop-up, and not the entire pop-up layer design as is now, then yes, it is possible to implement it this way. Though it requires some serious changes to the rollover script (roe.js). And I'm afraid, it may be very hard to do.

[leemcg]

Hi Egg,
No, there's no way to set non rectangular shape for mouse over testing with the HTML export currently. It requires imagemaps. Present version of the HTML export filter can not export image maps. But it is on the feature list to implement in future versions. So hopefully, it will be implemented one day

How odd... I'm certain that I get diamond shaped mouse over on IE 6 with Egg's example. Again I must check whether I am mad or not. Does anybody else get this? Do some browsers look at the transparency of the underlying bitmap?

Hi Lee,
I'm not perfectly sure how exactly you expect it to work. But if you simply want the pop-up layer to hide as soon as a mouse pointer moves out of the object that has invoked this pop-up, and not the entire pop-up layer design as is now, then yes, it is possible to implement it this way. Though it requires some serious changes to the rollover script (roe.js). And I'm afraid, it may be very hard to do.

Yes - as you can see on my website, I've used the mouseover to fake changing the colour of some rooms. And "Over" in the 3d view I've chosen doesn't really reflect the pop up area.

I was hoping that the parameters that define the boundary boxes might be defined in the HTML. There's certainly no way that I can consider editing Javascript, though. I'd probably have more luck recreating in Flash.

Regards
Lee

[covoxer]

How odd... I'm certain that I get diamond shaped mouse over on IE 6 with Egg's example. Again I must check whether I am mad or not. Does anybody else get this? Do some browsers look at the transparency of the underlying bitmap?

Unlike any other browsers that support transparency chanell in the PNG images, IE6 uses DirectX effect to load them with correct transparency. This has somewhat different behavior and does indeed select through the fully transparent area of the image. This partly works as you describe. So don't worry, you are not mad.
But still you should not rely on this sideeffect since it doesn't work in any other modern browser, including IE7.

[BobInce]

I'm certain that I get diamond shaped mouse over on IE 6 with Egg's example

I don't! IE7, Fox, Opera, Safari all behave the same for me.

Present version of the HTML export filter can not export image maps. But it is on the feature list to implement in future versions.

Hmm, tricky one. Would have to be limited to single groups, as you can't put an image map on top of another image map without the rectangular shape of the top one obscuring any links underneath it in the bottom one. So there are still some bad interactions with pop-ups it would be impossible to avoid, I think.

Plus of course most object shapes would have to be approximated with straight-line polygons.

Though it requires some serious changes to the rollover script (roe.js).

A quick visual inspection suggests that neutering the re() function may produce the desired effect:

function re(i){rc=0;if(ms>=0)for(;(i!=pl[pi])&&(pi>0);pi--){v0(ps[pi]);v0(ss1[pi]);v0(ss2[pi]);}}

replace with:

function re(i){}

I haven't checked this thoroughly but on first try seems to work.

[Egg Bramhill]

Hi Lee. Using your first xar file as an example this is what I get. CLICK HERE

Didn't see Johns post above until after I'd posted this. Perhaps John can tell us is it possible to have a non rectangular hotspot?