I am trying to create an html imagemap with highlighting.
I therefor use http://www.outsharked.com/imagemapster/ which did work on my tryouts, but does not work on the final map. The areas in the map seem to be correct - I did attach an click handler to them responding with the expected area. However, imagemapster does not highlight the areas.
What am I missing here?
Find my example here http://bernhardriegler.github.io/imagemap/index.html
found the answer here:
jQuery plugin imagemapster isn't doing anything
imagemapster does require the href attribute on all areas you wish to highlight.
Related
Looking to add a custom tooltip that displays on hover of a reference line. But it looks like there is no built in capability for this :(.
Has anyone found a hacky solution for this?
Tried adding a onMouseHover on reference line, grabbing the coords/position in the custom tooltip element and using the onMouseHover on the actual linechart. None of these seemed to work :(.
In a program I am creating, I need to have dragging. I figured out this part through W3schools but I can't seem to figure out how to customize it... What I'm trying to achieve is dragging but no ghost effect, and making it so the original image is hidden so it looks like it is only one image. Another thing I'm trying to do is get rid of the symbols. I'm clueless as to how to get rid of the symbols, and I can't manage to change the opacity of the ghost image... I've looked at a few other answers but I can't seem to get it to work.
My JSFiddle
#pointer1{pointer-events:none} //This prevents selecting of the drag. Not what I wanted
#pointer1{/*How to change the ghost?*/}
I would use jQuery for this. It will let you set options for the things you're looking for.
jQuery UI Drag Documentstion
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I am using javascript amcharts v3 to generate trend like interface element. I use trendline class to create trend lines that mark certain events. I would like to handle trendline click event but there seems to be no way of doing it.
Has anyone come across this type of problem or do you have any idea how to work around this?
For trend line example I use this page. There is jsfiddle link in it.
Thank you for the time you spend reading my question.
Edit: JSfiddle example - > here
Not the most elegant solution (i.e. it uses the generated content rather than hooking neatly into the framework), but I have done the following to catch a click event.
$('#chartdiv').on('click', 'svg path[fill="#00CC00"]', function(){alert('hello');})
Which will bind a click to the chartdiv and then filter on all svg path objects that are the colour of the trendline, triggering the code if it matches.
I created a simple map with two polygons (most of the code I got from the Interactive Choropleth Map tutorial). I added a L.control() to show information about the polygons in a div. Contrary to the tutorial, I would like to have this div displayed outside the map.
To get a clue what I mean please look here: jsfiddle.net/Tbr9p/
I'm pretty new to leaflet and javascript so it would be nice if anybody can help!
I think Leaflet is styling the _div you return on the event handler so it appears as a popup. Just get the DIV you want to write into (by ID, not by Class) and edit it.
See jsfiddle here:
http://jsfiddle.net/7n58L/6/
lines 103 and 110 of the JS, as well as some CSS and HTML tweaks. I think I changed some names.
see updated fiddle here
document.getElementById("information").innerText = layer.feature.properties.Name;