Hi I made an imagemap with area polygons which has tooltips over each polygon whilst the mouse is hovering over it.
I've also got a legend at the bottom of the image map, what I'd like to achieve is to whilst having the mouse over the specific item in the legend showing the tooltip on the specific polygon area.
Thanks in advance
While its not possible to force the same behavior as the title attribute gives you can use either http://jqueryui.com/tooltip/ or a css based tooltip http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/ to react to an onmouseover/onmouseleave event on your legend elements
Related
I wonder if anyone could assist me with this?
I am writing a webpage with a drawing area ("GraphicsArea", below) that loads a map as a SVG image into the innerHTML of the "DiagramArea" div contained in it. The SVG has defined areas which have events attached to them and css styling that allows me to highlight areas as I mouseover them, and fill them with a highlight colour when I click on them. This all works fine.
I have, superimposed over the "DiagramArea", a HTML5 canvas element ("CanvasArea"). I have some javascript that allows me to draw inside this freehand with the mouse. The canvas is transparent, and I can see the map underneath it when I draw.
I can toggle between the drawing canvas layer and the "DiagramArea" with the SVG which I am using as an imagemap, by setting zIndex. I have a button that does this, allowing me to swap between functionality to highlight areas of the map, and the freehand drawing functionality.
My problem is that if I toggle away from the canvas, its drawing is hidden while I use the image map functionality. I can toggle it back again to display the drawing overlay after I have highlighted the areas I want to highlight, but it's a bit clumsy
Is there a way to keep the canvas contents visible while I'm using the rollover and click events attached to the SVG? I'm not particularly fussy as to whether it's a style or code solution. I'd prefer to avoid having to use an external library, if possible.
<div id="GraphicsArea">
<canvas id='CanvasArea'></canvas>
<div id="DiagramArea"></div>
</div>
Many thanks.
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
I have an image icon I am using as the background of the graph. (I am not using the graph background function because I need the background resize as I zoom and the background need to move back and front of the graph.) The image icon is set as not selectable and not movable
I want to use the mxRubberband for multiple select of the other icon. However, the mxRubberband is not working as I start selecting from above the background icon. (It works if I remove that.) How should I fix it?
I just found the solution. Simple press "Alt" button while selecting. Or initialize the graph mxGraph.prototype.isForceMarqueeEvent to return true.
I have some graphs on my page. When the user drags his cursor over the picture, I'd like to show a horizontal line over the graph.
The one above is the starting point and the latter shows what should happen when the user points his cursor over the graph. The line should stay on the same level with the cursor, when it's over the image.
Is this possible with Javascript, for example?
It is, you need e.g. a div box positioned at cursers Y value with 1px green border. Position has to be set to absolute. But you can't paint directly in the image.
You can use D3, and based on svg, to draw the graph and the hover line , you could add other graph component to interact as well such as a slider bar to select sub interval to enlarge, changing labels etc.
Take this as an example to develop:
http://mpf.vis.ywng.cloudbees.net/
(you can drag the yellow bar, and click the legend; for source code, click fork me on github)
My GWT application consists of a "Dashboard" that has a few charts . I need to be able to hide and show charts as and when necessary.
As you can see in the jsfiddle below, i was able to hide the chart, but the invisible chart eats up mouse events(when the mouse hovers over the invisible chart the tooltips are still displayed).I need to stack another canvas on top of the chart when the chart is hidden.But since the chart is taking up the mouse events , my canvas cannot receive any. Any ideas as to how to fix this ?
http://jsfiddle.net/archerabi/vnBsx/1/
I think it's because you're only hiding the legend instead of the whole container. I changed .highcharts-legend to .highcharts-container and I think it solved that issue. See here