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.
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.
Soooo, what I'm trying to do is essentially a jigsaw puzzle. On the left side is an area with a stack of a dozen or so overlapping .png files of "ripped" paper pieces (all different irregular shapes with alpha) that when put together, in order on the right side, form a sheet of paper with notes on it. A visual (disregard rotated pieces):
Nothing new I know, but my two main caveats in developing this are that it has to work in ie8+ and on touch devices. So this means no flash (where this would of been very easy) and no canvas (stupid ie); which leaves me with js and maybe svg?
The drag and drop part in js is easy enough but the issue I'm having is that, as I'm sure you know, the alpha channel is ignored and the irregular ripped piece is actually a rectangle. Which makes this unusable given that pieces are a stack with pieces overlapping each other.
I can do granular hit detection on the drop by using an image map and setting a variable on rollover.
I've looked around a lot (here + google) and tried some ideas but I'm unable to solve the irregular shape select/drag issue. Any ideas?
Thanks for your time.
Low-tech solution
Nested elements with absolute position
If you're willing to spend a little extra time, there's a way to achieve this fairly closely, without having to use Flash, Canvas, SVG, or even image maps. And unlike an image map, it allows you to nest related content inside each hotspot if needed (e.g., pop-ups).
In the simplest case, you could use a single rectangular hyperlink hotspot for each piece of the puzzle. Obviously that greatly limits the range of shapes you can support (without interfering with overlapping elements).
But, if you take that hyperlink tag and give it a number of span tag children, and give each one absolute position (relative to the hyperlink), and apply the appropriate portion of the image to the background, then you can "construct" irregular image shapes that occupy a single irregular hotspot, with relatively-little interference with overlapping elements.
In effect, the image (with areas of transparency) is treated as a sprite file, with the hyperlink tag and the child span tags each occupying one portion of the "sprite file". Most of the transparent parts of the image will not be occupied by the hyperlink tag or the span tags.
Most shapes can probably be built using a hyperlink tag and 4 - 10 spans. Granted, the more irregular the shapes are, the more spans it will tend to require.
I've done this before, to create hotspots for each of the states on a US map, without using an image map (or Flash, Canvas, SVG), and it wasn't nearly as problematic as you'd think. It just requires a bit of time to figure out the details of how to break up each shape into the right number of rectangles.
The catch
Rounding error on mobile devices
Here's the catch, and it's a doozy. When a web page is scaled on mobile devices (and a regular page is almost always scaled on smaller devices), that introduces a rounding error that causes the px placement of the hyperlink tag and the span tags to possibly vary by at least 1 pixel horizontally and/or vertically. This also happens if desktop browsers are scaled; it's just that desktop browsers are not often scaled.
What would happen is that you would tend to wind up with 1 pixel or so of separation (or overlap) between the different parts of each shape. In many cases, that will tend to be very obvious and not acceptable visually. And depending on the implementation, the locations can vary by as much as 2px or 3px. When it occurs it's difficult to solve, and there are limits to how much of it can be solved.
Last I checked, Firefox is the only browser that's smart enough about rounding px values on scaled pages to avoid this problem. Hopefully other browsers will eventually support it better, as even simple pages often suffer from rounding errors.
The solution
Separate the images from the hotspots
The rounding error isn't much of a problem with hotspots (where precision isn't important). Where it really causes problems is with images (when you see an image not lining up where it should).
It may be possible to avoid the worst of the image rounding errors by doing the following:
Have one set of HTML code for the hotspots, same as described above, except don't display any part of the images in the hotspots. Give them all transparent backgrounds.
Have another set of HTML code for the images. Each one would be a single rectangular element that displays all of the image.
Place each image at the same position as the related hotspot.
Make sure the set of hotspots and the set of images both have the same z-index order. All of the hotspots will be on top of all of the images, but within the hotspots and within the images the order needs to be consistent.
When the hotspot for a piece is dragged, update the position of the related image to keep them at the same location. In effect, the image shadows the hotspot while it's being dragged.
Isn't ExplorerCanvas an option for you? I would think that that would allow you to create a canvas-based solution. That will be much better than anything done with plain html element manipulation through javascript
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.
I'm using the jquery maphilight plugin and have a large number (hundreds) of overlapping elements on my image map. I've noticed that when hovering over the image map, maphilight will highlight the first element it finds for those coordinates, so overlapping can become an issue.
I'm looking to be able to click the image map somewhere and have maphilight (or an external function) return me an array of all the elements not just the first one.
Open to any ideas on how to go about this.
EDIT: To simplify, when I click a point I'm looking for maphilight to get the area (as it already does), but then add that to an array and continue looking for other areas from the same coordinates. Not just return me the first area it finds and stop.
You may need to look into vectors. Using normal elements/divs/images is to complicated. Here a great example of this, Using jQuery, they created a word map http://jvectormap.com/ they make a fully interactive map. Another great example is svg but this can be quite complex http://keith-wood.name/svg.html
Hope this help's you go in the right direction.
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.