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
Onmouseover popup on svg map
Re: Onmouseover popup on svg map

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

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
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
-
- Posts: 2
- Joined: Tue Apr 10, 2012 9:05 pm
Re: Onmouseover popup on svg map
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
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

Re: Onmouseover popup on svg map
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.
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.