Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Mouse-overlap

  1. #1
    Join Date
    Mar 2009
    Location
    The Hague, Netherlands
    Posts
    14

    Default 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!
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	mouse-over.jpg 
Views:	199 
Size:	66.3 KB 
ID:	59239  

  2. #2

    Default Re: Mouse-overlap

    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

  3. #3
    Join Date
    Mar 2009
    Location
    The Hague, Netherlands
    Posts
    14

    Default Re: Mouse-overlap

    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!

  4. #4
    Join Date
    Mar 2009
    Location
    The Hague, Netherlands
    Posts
    14

    Unhappy Mouse-overlap 2.0

    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!
    Attached Files Attached Files

  5. #5
    Join Date
    Aug 2004
    Location
    Ukraine
    Posts
    3,904

    Default Re: Mouse-overlap

    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.
    John.

  6. #6
    Join Date
    Aug 2004
    Location
    Ukraine
    Posts
    3,904

    Default Re: Mouse-overlap

    Here's example of what I mean.
    Attached Files Attached Files
    John.

  7. #7
    Join Date
    Aug 2004
    Location
    Ukraine
    Posts
    3,904

    Default Re: Mouse-overlap

    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.
    Attached Files Attached Files
    Last edited by covoxer; 12 April 2009 at 10:12 AM.
    John.

  8. #8
    Join Date
    Mar 2009
    Location
    The Hague, Netherlands
    Posts
    14

    Default Re: Mouse-overlap

    Thank you!

  9. #9
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,504

    Default Re: Mouse-overlap

    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.

  10. #10
    Join Date
    Mar 2009
    Location
    The Hague, Netherlands
    Posts
    14

    Default Re: Mouse-overlap

    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.
    Attached Files Attached Files

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •