I would like to make a simple website that has a picture of the United States. When the user hovers their mouse over a particular state, I want to display a tooltip with information on that state.
The main problem I'm having is that I want the boundaries of the state to be obeyed. I do not want to have hidden rectangles overlayed on the state image, but rather I want the tooltip to be responsive to every state contour.
What would be the most logical way to go about this? Does the type of image I use for the United States (bitmap-based vs. vector-based)?
Thank you for your help!.
Do you have any browser limitation?? because if you use a SVG image you can easy detect which states has been click with javascript. But of course this is not Totally support it in older browsers...!!
You can make the SVG image with Adobe illustrator as example export the image as SVG, and consume it in you html as code (you should open the svg image with a text editor copy and paste the code) and from them you can define which areas you will click..
best
Method 1 - use regular HTML with a regular bitmap image (probably png). Use an imagemap with tooltips. You can define circles, rectangles, polygons, whatever. It's just easy HTML, no javascript, but the image is static.
Method 2 - use openlayers.org and define your areas using a gpx / kml file or similar. This looks much fancier and you can zoom and pan and do all sorts of fancy things, including pretty HTML popups, but it requires much more work, including javascript.
You could use the html tag to map your image and define each particular state area as a polygon shape with a set of points to interpolate the state contour. It would be a hell of an effort thought.
You should use this solution. It's already pretty much done for you. Also check out the docs.
If you want to do something fancier with the mouseover, you could use qtip2, it works great.
Related
so I am tasked to do a project. So let me show something first.
In this one. The Purple shape should only appear when Durable Returns part is clicked.
Now I am drawing blanks with coming up ideas on how to do this. What I want to ask is if it's possible to recreate all of this in html interactively.
SVG is what you actually want.
SVG has a DOM with different elements, allowing you to have polygons and such that you can place arbitrarily. You can embed text and lay it out as you need as well. SVG in-browser can be scripted and also have CSS applied to it.
I am working on a project to create an interactive floorplan for an office. I have a jpg graphic of the floorplan to the building. The idea is to create a search bar where you can search for an employee and their office will be highlighted on this graphic.
My original plan was to use the map tag and plot in the coordinates for each office. I would use jQuery to resolve the search value and link it to each office coordinate. However, I learned that you cannot add styles to the map tag which made this unworkable. I have a tried a few other solutions such as converting the image to a .svg and using the svg tag. This does not seem to work either since svg tag seems to be meant for creating your graphics on the fly in the document.
Can anyone point me in the right direction for this project? I keep going back to square one and not sure where to go from here.
You could specify a absolute position on a div (to indicate a persons location on the floor plan), when in a relatively positioned container.
You could then place data attributes of the inner div to do the calculation of the position.
<div style="position:relative;background:url(floorplan.jpg)">
<div style="position:absolute;top:50%;left:25%" data-person="Liam"></div>
</div>
This does involve separating out the sections into their own html tags, rather than being "embedded" in the image.
Also SVG aren't supported in older browsers
You should then access the div based on the data- attribute an modify it in the DOM.
You can then also use onmouseover (this won't work on touch devices), to activate styling changes.
I have an extremely large picture of a map. Now I want to create a Map UI where the user can click to highlight regions and also have the functionality to zoom into the map.
Is the AREA tag the only way to go at this problem? My only problem is when I zoom in the map, the will be enlarged and so will the image that it contains, but how would I expand the AREA coordinates according to my zoom level? Is there a good approach for going at this problem?
AREA is the only way to represent polygons, unfortunately. You can read your coordinates from the AREA tag, scale them, and write them back. Rounding overlaps are a pain to deal with though.
One alternative is to use the BING maps API, which allows custom overlays. You need to create an overlay for each zoom level though.
Apply css to AREA MAP
I suggest SVG there, which would also solve your zoom problem. The only complication is that IE8 and below won't support it, and IE9 isn't being pushed through Windows Update to non-beta users yet.
Simple option: ImageMapster figures out most image area map things for you on the fly. IE6+, needs jQuery.
More complex, more powerful option: Raphael.js enables you to create fully controllable fully scalable SVG vector graphics in everything from IE6+ (doesn't need Flash). Bit of a steep learning curve, but it's very powerful.
Is it possible to create an arbitrary shape on a web page so we can detect mouse overs/outs on it? It's much like an area map for an image but corresponds to a page (or a div etc) rather than an image.
This might be a non starter altogether as I haven't found any information in this area. Thought I'll just ask here to see if there is any way to achieve this.
My original requirement is to provide an area map for a set of images such that one area corresponds to a list of prearranged images so any points in area can be mapped onto a specific image in that list using that image's position.
Any information will be helpful.
There is the <map> HTML element that allows the definition of geometrical primitives and even polygons.
The <area> elements defining the areas inside the map support standard mouseover and mouseout events.
There are javascript-/jQuery-based extensions to even highlight map areas. See this question for more info.
I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be filled with "red" for example) that country and display the countries' name (preferably text in a div), I will also be linking the highlighting event with a that will highlight a country when selected.
I am having a difficult time finding a suitable solution, I refuse to use or learn a proprietry technology such as flash so it is not an option. I created a simple mockup using openlayers and a custom map image but the countries' markers load too slowly in IE6.
Also svg seems too large, as I tried to use RaphaelJS, but abondoned it when I realised the world map data is 1.2mb which is totally un acceptable for the front page of a site..
I am really at a loss on how I am going to do this, my last resort is to manually create 250+ (however many countries there are) pngs and apply mouseover events to hotspots in the image... but this is probably going to be a dead end too.. desperately seeking a solution, any helpful comments will be appreciated!
I developed jVectorMap for that purpose.
Why reinvent the wheel. Google Charts already does this.
I finaly settled with RaphaelJS, importing all the paths from an svg in inkscape, works amazingly well!
We've developed Highmaps, related to Highcharts, to easily solve data visualization problems like this. We also supply a map collection of over 350 maps, optimized for size to keep things lightweight.
For a drilldown example (loading more detailed map on mouse click) see this demo.
Highmaps is free for non-commercial use.
Do you have country coordinate data stored somewhere?
If so setting up functions to parse through the passed in data and create 250+ paths should not be that large.