I was about to say no, because of the timing issue, but then I remembered a trick I recently learned in jQuery which actually makes this work: http://jsfiddle.net/asgallant/82TYA/63/. It's not perfect, but it mostly works.
You might be able to adapt that to your needs. The major issue is that it only captures the actual SVG/VML path being hovered over, so regions that are drawn as multiple paths (see Canada and Russia in the example) don't change all the paths when hovering. On Monday, September 24, 2012 1:01:43 PM UTC-4, Carlos Moreira wrote: > > hello asgallandt > did you ever succeed to complete that example > http://jsfiddle.net/asgallant/82TYA/5/ ? > I'm trying to do the same, also trying to disable that mouseover effect > with the stroke-width variable, but I can't find a solution. New paths > just get drawn over it.. > It would be great if you could share any other developments of that > experiment. > cheers! > > > > Quarta-feira, 13 de Junho de 2012 16:17:44 UTC+2, asgallant escreveu: >> >> You might be able to, with a bit of hackery. I started some code for >> this, though it needs a great deal of refinement: >> http://jsfiddle.net/asgallant/82TYA/5/ >> >> The problem is that the geocharts draw a new path in SVG on mouseover >> that overlaps the old path, and we run into a timing issue, where we don't >> have any way to tell which mouseover event will be fired first, so we can't >> be certain the new path will exist when our code executes. >> >> On Wednesday, June 13, 2012 8:09:36 AM UTC-4, Sachin wrote: >>> >>> Hi, >>> >>> Can I change a region color or marker color on mouse hover? >>> >>> Thanks, >>> Sac >>> >>> On Tue, Jun 5, 2012 at 9:24 PM, asgallant <[email protected]>wrote: >>> >>>> BTW, this solution doesn't work in IE < 9, so we need an alternative: >>>> http://jsfiddle.net/asgallant/82TYA/ >>>> >>>> There probably is a way to do this as pure CSS, but a) I'm not a CSS >>>> expert, and b) VML hates me, so I don't have one. >>>> >>>> >>>> On Tuesday, June 5, 2012 10:45:16 AM UTC-4, asgallant wrote: >>>>> >>>>> If you leave out "forceIFrame" in the current release (or set it to >>>>> true in the next release), then you need to use a few tricks to get >>>>> inside >>>>> the iFrame, but it can be done (search this forum, I've posted a bunch of >>>>> things on the topic). >>>>> >>>>> I dug into the SVG and it looks like the GeoCharts add a new path on >>>>> mouseover of regions, which overlaps the other path. Since this path is >>>>> new, it doesn't have the css to change the cursor associated with it. It >>>>> turns out, however, that I made the original unnecessarily **complicated; >>>>> there is a pure CSS solution to the problem: >>>>> http://jsfiddle.net/asgallant/**HNkLn/<http://jsfiddle.net/asgallant/HNkLn/> >>>>> >>>>> >>>>> This solution probably works best with forceIFrame = false. You >>>>> could, conceivable, add this CSS to the <head> of the iFrame if you >>>>> didn't >>>>> want to use the forceIFrame option, but I haven't yet encountered a >>>>> reason >>>>> to stick with iFrames. >>>>> >>>>> On Tuesday, June 5, 2012 7:31:25 AM UTC-4, Xia Wu wrote: >>>>>> >>>>>> >>>>>> Hi Asgallant, >>>>>> >>>>>> right now for my geochart I also face the same request of when >>>>>> mouseover then change to the hand cursor. I tried the solution you >>>>>> suggested , however, the it only change for short time(one second maybe) >>>>>> when the mouse moved from dataless area to the dataarea and if the >>>>>> option >>>>>> 'forcelFrame' is not set to false, this will not working at all. I paste >>>>>> the code in the following, could you help me to find out maybe there are >>>>>> some bugs i made there? Thanks in advance! >>>>>> >>>>>> Xia >>>>>> >>>>>> >>>>>> >>>>>> google.load('visualization', '1', {packages: ['geochart']}); >>>>>> >>>>>> function drawVisualization() { >>>>>> var data = google.visualization.arrayToDa**taTable([ >>>>>> ['Country', 'Popularity'], >>>>>> ['Germany', 200], >>>>>> ['United States', 300], >>>>>> ['Brazil', 400], >>>>>> ['Canada', 500], >>>>>> ['France', 600], >>>>>> ['RU', 700] >>>>>> ]); >>>>>> >>>>>> var geochart = new google.visualization.GeoChart( >>>>>> document.getElementById('**visualization')); >>>>>> >>>>>> google.visualization.events.**addListener(geochart, 'ready', >>>>>> function >>>>>> () { >>>>>> $('#visualization').find('**path[fill!="#f5f5f5"]').css('** >>>>>> cursor','pointer'); >>>>>> }); >>>>>> >>>>>> geochart.draw(data, {width: 556, height: 347,forceIFrame:false >>>>>> }); >>>>>> >>>>>> } >>>>>> >>>>>> google.setOnLoadCallback(draw**Visualization); >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> On Thursday, May 24, 2012 7:52:05 PM UTC+2, asgallant wrote: >>>>>>> >>>>>>> jQuery can help you here. I haven't tested it, but in theory this >>>>>>> should work: >>>>>>> >>>>>>> Set the 'forceIFrame' option to false (best for future compatibility >>>>>>> - it can be done without this step, however). Use a ready event >>>>>>> handler >>>>>>> for your chart, and run this: >>>>>>> >>>>>>> google.visualization.events.ad**dListener(geochart, 'ready', f** >>>>>>> unction () { >>>>>>> $('#visualization').find('**path[fill!="#f5f5f5"]').css('** >>>>>>> cursor', 'pointer'); >>>>>>> }); >>>>>>> >>>>>>> If you use a color other than the default for dataless regions, you >>>>>>> will need to change the '#f5f5f5' to the correct color string. If >>>>>>> you want a hand cursor to appear for dataless regions too, then you can >>>>>>> omit the '[fill!="#f5f5f5"]'. >>>>>>> >>>>>>> On Thursday, May 24, 2012 1:07:35 PM UTC-4, Sachin wrote: >>>>>>>> >>>>>>>> Hi, >>>>>>>> >>>>>>>> I am using Google Visualization Geochart API for one of the >>>>>>>> applications. >>>>>>>> My query is that in any case can change the mouse cursor to a hand >>>>>>>> cursor or any other type on mousehover on any regions or markers? >>>>>>>> >>>>>>>> please let me know if there is any way. >>>>>>>> >>>>>>>> Thanks and Regards, >>>>>>>> Sachin >>>>>>>> >>>>>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "Google Visualization API" group. >>>> To view this discussion on the web visit >>>> https://groups.google.com/d/msg/google-visualization-api/-/SIzlgDFzveUJ >>>> . >>>> >>>> To post to this group, send email to [email protected]. >>>> To unsubscribe from this group, send email to >>>> [email protected]. >>>> For more options, visit this group at >>>> http://groups.google.com/group/google-visualization-api?hl=en. >>>> >>> >>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/iPNfKp5fo_EJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
