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