Onmouseover popup on svg map

Post questions on how to use or achieve an effect in Inkscape.
mikezimonyi
Posts: 2
Joined: Tue Apr 10, 2012 9:05 pm

Onmouseover popup on svg map

Postby mikezimonyi » Tue Apr 10, 2012 9:17 pm

Hello everyone,

I'm trying to get this map to be interactive with the colour of the country changing and a popup displaying when the mouse goes over each country. I tried using the title option but it takes a second or so to appear and disappears if you move the cursor, even if the mouse is still on the country - it's not the solution I'm looking for. Any ideas? I'm not a pro coder so I don't really know how to integrate any javascript codes, but I'm more than willing to give it a go if someone would be kind enough to give me some instructions.

The second thing: a simple colour change when the mouse goes over the country.

Thanks for your help everyone!

Mike

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Onmouseover popup on svg map

Postby brynn » Thu Apr 12, 2012 2:22 am

Image
Welcome Mike!

Someone else was looking to do something like this, not too long ago. I can't remember what he finally decided to do. I'll try to find that one and give you a link. Meanwhile, I have a couple of questions.

I tried using the title option but it takes a second or so to appear and disappears if you move the cursor, even if the mouse is still on the country...

I don't understand what you mean about "the title option". Do you mean that there's some XML code of "onmouseover popup"? Does this cause some text to pop up with the name of the country? Like what Windows calls a "tool tip"? They do just last for a couple of seconds before they go away. Or does the country itself sort of appear to rise up?

I suspect that this can indeed be done with javascript, but I wouldn't know where to refer you. Someone else might know though. I'll get that link which will have a lot of other info :D

Edit
I found a couple. This is the one I was thinking of: viewtopic.php?f=9&t=11621
But while searching, I found these: viewtopic.php?f=14&t=11731
and viewtopic.php?f=6&t=4138

mikezimonyi
Posts: 2
Joined: Tue Apr 10, 2012 9:05 pm

Re: Onmouseover popup on svg map

Postby mikezimonyi » Thu Apr 12, 2012 10:07 pm

Hi brynn!
Thanks for the quick reply!
By "title option" I did mean the tooltip. It's essentially the sort of thing I'd like, but one that pops up instantly as you go over a country and stays there as long as your cursor is on it. I think it has to be javascript too, so I'm hoping someone might know what the code is and where to put it in.

And thanks for the links, the first one is pretty much the same issue as mine, but no responses about specifics there either :(

chriswww
Posts: 383
Joined: Fri Nov 19, 2010 3:04 pm

Re: Onmouseover popup on svg map

Postby chriswww » Fri Apr 13, 2012 11:55 am

i don't mean to be discouraging but it reads as if you still need to read/learn a fair bit to come up to speed in being able to apply the various technologies (html, javascript, xml, svg, etc) to be able to just summon up whatever you desire. There's also lots of "issues" about levels of compliance and support of those particular technology standards in the various web browsers. if that's your chosen deployment model.
i've actually used a wikipedia map of australia, attached some SMIL code to it, and so each state changes color when you hover mouse over it. i put this inside a intranet mediawiki instance which i loaded with a extension that allows us to view it with our corporately mandated IE6 browser. There's much more detail to this than i outlined here. Hopefully you understand that it's not just a matter of pasting generic code into somewhere and presto. But if you have even a rudimentary understanding of svg and read up on some SMIL (animation effect specifiers you embed right into the svg file using a text editor) then you'll be well on your way, i think. you'll want to have a svg group tag (g) around all the elements making up every individual country on the diagram -- need to create these groups by hand. otherwise they're just bunches of lines with co-ordinates; not "countries" at all in our sense of the word.
html tooltips are related to specific html tags, and work quite differently in various browsers and operating systems....and you don't really use these html tags for svg, i.e. they don't intermix in that way.


Return to “Help with using Inkscape”