Mouse-overlap

I'm making a map of Europe. All the countries are separate graphics. When you mouse over a country it changes colour (MouseOver layer), and when you click it some info appears (layer per country). Everything worked fine until I added Luxembourg ... It is overlapped by Belgium's selection square so when you mouse over it, Belgium and Luxembourg both change colour. The info that appears is mostly Belgium's but if you're lucky you can get Luxembourg's info, too :).
Since I'm not exporting in Flash, I can't seem to select the option to make the clickable area the shape of the object and have it work. I've tried soft grouping the objects, but that doesn't make any difference.
The only other thing I can think of is making a small clickable square on top of Belgium but I would like to avoid that.
So ... does anyone know any way to get around this?
Thanks!

Sandra,

Not 100% sure on this, but it's worth a shot. I think if you move the Luxembourg layer under the Belgium layer, that should fix your problem. In your layer gallery, just drag Luxembourg until it is under Belgium and then release.

Thanks

Dear Razzle0146,

I tried your idea but it didn't work ... I also tried bringing the Luxembourg graphic to the front - nothing.
But thanks anyway!

I'm sorry to keep going on about this, but I'm still struggeling with my map of Europe. I made tiny (so they don't touch) clickable squares over the countries, even though this could make it hard on visitors to hit the right spot. I left them visible for now but the plan is to make them transparent when / if everything works. But still Belgium is highlighted when you mouse over Luxembourg. On click the right information is shown though. (The other way around, when you mouse over Belgium, everything is fine, eh.)
The trick with the squares was my plan B and now I don't know what to do anymore, and I haven't even gotten to Liechtenstein yet!
Can anyone pwwweeeeese help me? Xara cracks? I can't afford to buy Flash.
I attached the .web file - never mind page one please :).
Thanks again!

Hi Sandra,
I see your problem. The reason is that you use mouseover layer to highlight selected object. It works following way: if the rectangle of the object on the mouseover layer intersects with rectangle of the objects that you a hovering over by more than 50%, it is displayed. In your design the rectangle over Luxemburg is fully inside the rectangle of the Belgium image on the mouseover layer.
I would advice you to use popups instead of rollovers to implement the effect you want.

Here's example of what I mean.

Also, with overlapping countries you can split the country image in a few parts to decrease the ammount of overlapping.
See the attached example, I had divided Belgium in two so it now almost not overlap with Luxembourg. You can see it clearly when moving pointer from one to another comparing with previous example.
Hope this helps. :)

Thank you!

Sandra

Welcome to the Web Designer forum. :)

Another solution, although less elegant than your mouse over effect, is to have a series of thumbnail images or text (the country names, for example) that make the pop up layers appear. These objects or names could be away from the actual map.

You could also on the same pop up layer, have the country appear to light up. If the color is dark yellow for the country, it could change to light yellow on the mouse over.

Hi Gary,

Wow! I just came up with the same solution (I'm very proud), see attached - again, never mind the first page :). I put the mouse-over effect on a different layer than the onclick effect because otherwise the info disappeared on mouse-off.
John's earlier solution worked fine until I added France - huge square - and cutting up all the images like he suggested would mean a terrible amount of work plus loss of surrounding lines.
Anyway, this isn't bad. By the way, if I increase (ctrl+) or decrease (crtl-) the page size in my browser it doesn't work anymore. But I only tried that locally so maybe it will work better online.

Thanks for the reply and for welcoming me, I'm glad to be here.

Pop-up layers is a simple and elegant solution, but, if employed site-wide, produces an unweildly layer list.
Early versions of Photoshop suffered the same problem until Adobe introduced a layer tree where related layers could be nested/grouped into sub-folders.
Perhaps Xara could consider adopting a similar layer tree in later versions of XWD?

A very attractive interactive map by the way.

Ray

John, I expect that is it not possible because of browser technology or someone else would already have it in a program by now, but I might as well ask.

?? Is there anyway WXD could be modified so the mouseovers/'hotspots" would conform the actual object shape rather that to its rectangular-selection area ??

Something like, mask the clickable area using alpha channels.

You mean like if you wanted a circle as a button? I can be done, see attached. Is that something like what you're after. :)

No I don't think so - if I may answer (be)for(e) jclements - because here, too, the clickable area is a "Rectangle surrounding object" instead of the "Shape of object" (Flash export only).
So can't it be done outside Flash? (Dreamweaver has a possibility to draw clickable areas in all kinds of shapes (clickable map function).)

I'm happy with my clickable country list but I would have preferred the Shape of object thing, so I could have made both the list and the map clickable, as was the original plan. Still loving XWD though!

(Thanks for liking my map, Ray!)

Quote:

---

Originally Posted by jclements

Is there anyway WXD could be modified so the mouseovers/'hotspots" would conform the actual object shape rather that to its rectangular-selection area

---

Yes. This can be partly implemented with imagemaps.