Segmented Circle Interaction in html/css/javascript - javascript

I have a segmented Circle like the one below, and I would like to be able to interact with it by clicking on the numbers.
I've created an imagemap, hooking the area-tags with onclick-events, but I would like the background behind the number I click to change from white to blue.
I'm not locked in on the imagemap idea, so if there are any other approaches to achieve this then I'm open for those suggestions too.

Related

Crop zoomable and movable SVG to what is visible in the div

I have built an ASP.NET MVC application which will render a floor plan in SVG after a user selects a specific buildling and floor. Using Timmywil's panzoom library, I've added the ability for users to move the floor plan around and zoom in or out on it. The floor plan is initially rendered in the center of the screen and the zoom is adjusted so the whole floor plan is visible.
Via a button, users can save the floor plan in PDF format. After this button click, the SVG tag with the paths inside is used as input to convert it. However, only the initial situation is saved since the viewbox and coordinates are still the same. I've used Timmywil's samples to demonstrate my problem. Below is the initial situation. So the floor plan (in this case a lion) is nicely centered and fully visible inside of the div (the black bordered box):
In the situation a floor plan is really large and a user would only like to have a certain part of saved (picture 2 and 3), it should 'crop' the SVG, but I'm having trouble finding the numbers and making the calculations to achieve this. I guess it has to be done by changing the viewbox values.
Could someone help me out?

Drag and drop different shaped over an image

I am doing one task and in that I want to drag and drop the different dynamically shaped [like : circle, rectangle, oval, etc] over an image. Like
In this picture you can see that how the rectangle shape has drag and drop over an image. This type of features I want in my task. I have search this features in many websites but nothing I have to seen which I want. So is there any jquery plugin or any javascript then please suggest me or give me some hint.
Advance In Thanks.

Highlight text and a polygon shape on an image simultaneously

I am trying to achieve an effect similar to this site:
only instead of the mouseover function putting a border around the corresponding image, I want to simply highlight different parts of the image by drawing a polygon with defined coordinates over the image.
I have a test of my site up at:
http://perfectdays.ca/image-map/
I used a plugin called ImageMapper in Wordpress to create the image map as you see it on the site. Right now, when you mouseover the arms, for example, the arm regions on the image are highlighted.
I cannot figure out how to a)have the corresponding text on the left get highlighted when you mouseover the arms, or vice versa (and more importantly), have the arms highlight when you mouseover the text "Full Arms."
There was a somewhat similar post called Javascript Newbie: How to highlight text and image in different divs on mouseover.
However I cannot figure out how to adapt that to include the highlighting of certain parts of the image without using the plugin mentioned above.
Any help is much appreciated.
Are you able to put this in your area tags?
onmouseover="highlight(this.id);"
Then you can just make a simple javascript function that changes the class of the corresponding link.

Can a canvas within a canvas easily be cleared from the main canvas?

I'm currently working on an interface where I have a primary canvas that is 800x800 in size. At the top I've generated a bunch of icons. When a user mouses over the icons at the top, it matches his mouse's x and y coordinates to determine if he is currently hovering over any of the icons. If he is, I want to have a hover effect where a label appears next to the mouse with the name of the icon. As he moves, the label follows the mouse. If he leaves the icon or moves to a different one, the last one is cleared, and either there is no label displayed (if the user moved off all icons), or another label is displayed next to the mouse in the last one's place (if he hovers over another icon, the width of the label is a variable length depending upon the width of the text).
The process of ordering and displaying these icons all occurs within a separate object from the rest of the canvas renderings, thus I wouldn't exactly want to re-render that entire object to display the icons every time a mousemove event triggers, so I'm wondering if there's a way to draw to another "temporary" canvas' context and whether or not that could be easily cleared. as the mouse moves so there isn't any trails left behind on the primary canvas? Can anyone point me in the direction of an example like this or advise me on how I should go about accomplishing this sort of task?
Yes you can certainly draw it onto a temporary (in-memory) canvas. This is done a lot of various reasons, and yours may be valid (especially if you don't have any background that changes). But it may not be the easiest to implement, its hard to say without knowing more about your app.
There's a decent alternative you should consider: you could have two canvases that are 800x800 in size overlaid atop each-other. This can be useful for some applications (like games) where there is a background, foreground, and middle-ground that all have different moving parts (but the background parts move rarely, and foreground isn't always present, etc)
In the same way, you could "layer" your canvas app, with the icons being on one canvas, and the background and other parts of the app being on the other canvas.

Click on different transparent PNG's. Which one is clicked?

I am trying to create a map of a country, divided in different provinces. When my products are available in a certain provinces, these provinces will light up on the map. I then want people to be able to select one province and click on it.
I'm thinking of doing it like this:
1) I have a background of the complete country in dark colors
2) Every province has a separate transparent png in a light color
3) When my database detects a product is available, it will show the background image + the light color image of each province
The problem is: I want the light color image to be clickable, but the canvas of all the images will overlap. Is there any way to accomplish this ? It should work in all major browsers, and preferably NOT with image maps. I would like to link the clickable area to the non-transparent part of the PNG image.
I hope this makes a bit sense, many thanks in advance.
An option is to just create your world image, and another hittest image, where all provinces are a different color. When the user clicks somewhere, you can just get the color of the clicked pixel, and relate that back to the province. So your hittest image would, for example, have Texas as red, California as blue and New York as Green. When you click you just have to figure the color out, and there you have your state.
As for getting the pixel color under the mouse, canvas can do that. However thats not supported in < IE8, perhaps you can look into explorercanvas. Otherwise you could do it serverside, just do an AJAX request to your page with the (relative!)x/y on click, your backend can figure it out then.
You can register click only on whole images, not colored parts of it. To have your map accurate you'll have to use canvas or flash.
<img> tag is clickable by it's square size, doesn't matter if part of image is transparent. Even if you click on transparent part of image, the click event will occur.
To couter-act that, take a lok at HTML IMAGE MAP <area> HTML tag (google it) and optionally tell the browser what part of image do you want to apply some event.
Click will also propaginate to bottom elements at the same position. This means that <body> is always clicked, if you don't stop propagination with e.stopPropagination();
If you don't want image maps, you can place invisible DIVs on the top in the shape of the clickable area. But I'd probably go with image maps.

Categories