I'm thinking of making an application where at some points a graph is displayed that maps people over time and space. The vertical access is location, the horizontal access is time, and each person is identified by a line. At any point where the person did something of significance, there is a bigger dot on their line. Conceptually, clicking the dot brings up data about that particular dot, but clicking anywhere else on the line brings you to a detail on that person. Hypothetically, when you hover over the line the line should change color, and when you hover over a dot, just the dot should change color.
I know that I could do this pretty easily with flash, but I was wondering if these days there is any way to do this using only html and javascript. Is it possible? (Compatibility is not an issue, the only machine I am targeting is my own.)
Thanks!
You can do this with canvas, but it might be simpler to use SVG.
Since SVG uses DOM, you get builtin methods for handling events like clicking etc., instead of having to write your own handling code like you would need with canvas.
There are a few libraries that make working with SVG simpler and cross-browser compatible, such as Raphael and Dojo's dojox.gfx library.
You could create the dots as overlaid divs, so you can easily handle clicks etc. You'd have to sort out positioning quite neatly, of course.
However, highlighting the line will involve calculating the point-to-line distance manually and redrawing.
Related
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 have to place on a web page a cylinder that looks like this:
it is composed by small images that overlaps to draw the curves on the surface. Every one of them is places on the page with a different img tag enveloped in an anchor with its own href. The z-index property of the img is used to make them overlap in the right way.
The cylinder has to be composed because it is dynamically created, as you can see from the image, its faces can have different colors.
What i need to do is to make all the faces clickable and each one has to point to a different URL.
My problem is, of course, that the cylinder has curves. And i have to be sure that the clicks points to the correct URL especially near the curves, it hasn't to be precise at pixel level, but at least acceptable.
I've tried to use a map with a single area for each of the images that composes the cylinder, but of course it didn't work, as i saw from the specifications, in such cases only the first declared map in the DOM works.
I'm thinking about to solve this via Javascript, but i think it wouldn't be an easy job, so i would be happy if someone can give me some advice on what should i try.
Oh, i cannot use HTML5 features to solve this.
Neat application of older technology to solve a challenging puzzle.
I can think of two ways forward for you. One is to put a transparent (rectangular) image on top of the cylinder and create an HTML image map, using the shape="poly" attribute. For resources, search for the HTML elements map and area for reference, especially the shape attribute. There should be many good tutorials online. Nowadays this technique isn't used that much any more, but it was really popular in the late 90s.
Another way is to use event delegation in javascript, attaching an event listener to the primary container. On each of your image "pixels" apply a CSS class for the appropriate portion of the cylinder it is in. In your event handler, you can do something differently depending on the class of the clicked on image, and you can do this without the massive overhead of attaching an event on each individual "pixel". In JQuery this would be something like:
$("#cylinder").on("click", ".green", function() { location.href = "green_url"; }
$("#cylinder").on("click", ".red", function() { location.href = "red url"; }
assuming you put class="green" on your green pixels and class="red" on your red pixels. (You can do this by quadrant or other technique; color is just an example).
Your best luck SVG ! https://developer.mozilla.org/en-US/docs/SVG/Tutorial
It is almost impossible with html dom elements to do this, you will have to bend it with CSS compatible all browsers.
There is also Canvas but you will have a hard time dealing with the clicks.
Only problem with SVG is that it's not supported in < IE8, and hardly in IE8. But bending a DOM element is also not available < IE9.
EDIT:
I saw that you can't use HTML5, so your only chance is generating the whole image in GD2 for example and trying to map the points. But what is the reason you can't use HTML5 ?
You might also try doing it using javascript / canvas via getImageData() function. This canvas function will rgba values of the given point. Using the alpha value you can check if mouse is over or clicking on the correct area or if it is a transparent area and nothing should happen.
I also made jquery plugin exactly for this purpose. Maybe it might help. http://www.cw-internetdienste.de/pixelselection/
In my isometric flash game I have some models with long shadows. I want to ignore the mouse events (move, click, down and up) when the user performs any action on the shadow part of the image. (see sample image)
I know there is a way we can do it by creating a mask in flash. But what if I want to handle it on the .png images (bitmap)? Do I need to create a mask image for all such images? I think it will be very big deal unless there are easy ways (using tools in Photoshop).
Update:
Looking for a "codable" solution to handle the shadows (like the one Richie_W said
Get the pixel colour value where the mouse was clicked - If it is the
shadow colour you can then ignore the click
NOT a solution which involves art work, like creating mask asset or creating shadow asset etc
My friend told me cityville is not using masks but they are handling from code.
Does any one know how it can be done? OR
It can't be programed and only way is to create masks?
There are a number of options you could try (IMO in order of solution quality):
Update your system to seperate out the shadow asset from the thing casting the shadow. From there it is easy to only attach a click listener to the correct asset. This system allows for future improvements such as changing the shadow asset at runtime (Different times of the day etc) without having to deal with updating the click listener node.
Get the pixel colour value where the mouse was clicked - If it is the shadow colour you can then ignore the click. This is a pretty flaky solution but quick to implement.
I would like to face a problem for which I haven't seen a solution looking around in Internet. This is: I need to save the elements drawn by WEB users on a canvas space not as a flat image, but each one singularly. This in order to let the same user, or even other users, to modify every single element (drag-and-drop, erase, erase partially, ecc.) in a second moment. This should also help to eventually save a drawing history and restore it in next working sessions. All the examples I found were intended to save just a canvas flat image.
Update:
To better clarify: not necessary as layers, but for sure I thought to realize several different driving tools; a drawing element is the singular application/istance of a tool: a circle, a box, a added image, a straight line or even a free hand drawing that start from the moment of right button mouse click till it is released. Then the chance to save the elements state allowing to modify each one in a second moment.
You can't do this natively with canvas. You should look at using a third party library. Fabric is a library that was built to do what you want.
The base idea was to use convans as a container for vectorial shapes (triangles, squares, cirlces, etc.), manual drawn figures (see example http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) and inserted images giving the chance to users to save/upload the content not as serialized image, but with each distinguished element in its original format in order to continue to work on them in a future work session.
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.