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/ > > 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.arrayToDataTable([ >> ['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(drawVisualization); >> >> >> >> >> >> 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.addListener(geochart, 'ready', function () { >>> $('#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.
