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.
Related
How can I draw a Bezier Line between two non-static DOM elements, like this:
The two lines should be drawn between the
<div class="brick small">Line starts here</div>
and the
<div class="brick small">Line ends here</div>
of this CodePen: https://codepen.io/anon/pen/XeamWe
Note that the boxes can be dragged. If one of the elements changes its position, the line should be updated accordingly.
If I'm not wrong I can't use a canvas, right? What can I use instead?
Let me point you toward the answer I beleve you're looking for, it's a dom element type called 'SVG' which is supported by most if not all web browsers of today (so you won't need to plug in anything external), in which you can draw lines, shapes, apply graphical filters much like in Photoshop and many other useful things, but the one to be pointed out here is the so called 'path', a shape that can consist of both straight lines with sharp corners, or curved lines (bezier) or both combined.
The easiest way to create such paths is to first draw them in for example Illustrator, save the shape in the SVG format, open that file in a text editor and pretty much just copy the generated markup code and paste it into your html, as it is supported there. This will result in the drawn shape to be displayed on your site. But in your case, you won't come around the a little bit complex structuring of the paths, because you wish to have control of it using javascript, so I would suggest first making a few simple paths in this way by exporting from Illustrator, study these in code, then manipulate their bezier values in javascript until you get the hang of how they work, once you've done that you will be able to create the accurate bezier shape you have in mind and (knowing the positions of the elements you want to connect) position them so that they connect your boxes.
Paths can even be decorated with markers, like an arrowhead in the end or beginning of the path, you can even design your own markers as you like them to look and much more if you would dig deeper into it.
Good luck! :)
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 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.
Is there a way to convert a stroked path to a shape using javascript? Do any libraries offer this as a build in feature?
I know Illustrator has this function, so a possible solution would be to copy the SVG image on the screen and move it to Illustrator, but if you could do that, would you lose all the associated meta-data stored as attributes?
[I]s there a way to convert a stroked path to a shape using JavaScript?
Yes, there's a way to convert an SVG path stroke into an outlined shape. Unfortunately, it is not a prepackaged function built into SVG. The way to do it is called Math. You'd need to account for bézier curves, miter settings, linecaps, linejoins, and dasharrays. As #inhan noted you might use various functions to help you or to approximate it, but none of them are going to do the math for you. It is possible, but it is not by any means easy…in JavaScript.
[W]ould there be a way to copy the svg image on the screen and move it to Illustrator?
Sure, that's easy.
Open your D3.js SVG-based illustration in a web browser.
Open the Developer Tools (or Firebug).
Find the element you want, right-click and choose "Copy as HTML" or "Copy SVG".
Paste the code into a text editor and wrap it with SVG.
Open the SVG in Illustrator.
Outline the path(s) you want.
Save as SVG
Copy/paste the SVG code Illustrator exported into…wherever you want.
But what does this gain you? Certainly nothing that works with your D3.js visualization.
But if you could do that, would you lose all the associated meta-data stored as attributes?
What are you talking about? If you are talking about attributes in the source code, then you only lose it if you don't copy/paste the attributes onto the result. If you are talking about JavaScript data bound to a visualization running in the web browser, of course you are going to lose the data if you round trip through Adobe Illustrator.
Your questions make so little sense to me that I have a feeling that I must be missing what your needs/goals are. What are you really trying to accomplish?
Using Element.getTotalLength() and Element.getSubpath() functions in Raphaël along with stoke-width and stroke-dasharray attributes of that path in a function would probably give the result.
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.