I have an outline of Asia as shown below:
I want the countries to fill with red when hovered over, such as this:
The cut-outs exactly fit the map. I've been pretty confused with the information I've found so far on the internet as to how to do this. Some people say HTML 5 maps, others say jQuery, others say SVG... I just want a definitive method of how to accomplish this so I can at least attempt this project. Also, I've found it hard to find good tutorials online, so if a step-by-step method could be told, that would be great (I can find tutorials for each step, just need to know what I should be doing).
Thanks a bunch in advance.
SVG allows you to assign CSS style classes to individual shapes. One possible CSS class is the :hover pseudoclass. This allows you to change the styling when the user moves the mouse on the shape.
An example how to do this, can be found here:
http://css-tricks.com/using-svg/
Related
Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).
Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??
CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.
I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.
I'm trying to find out how to recreate the effects of the icons here:
https://designmodo.com/flat/
especially the retina display icon with the moveable lens.
However, after 2 days of trying to look for a solution/ tutorial I still couldn't find anything like that.
I've looked into JS solutions as well as HTML5 Canvas. Perhaps I've been looking in the wrong place or with the wrong search terms.
Can anyone point me to the right direction?
Cheers
Ryan
They're using SVG images (with a PNG fallback for older browsers) and animating certain paths in the SVG using JS and CSS.
Explanation of the technique here http://css-tricks.com/using-svg/
Excuse me for this, probably spoony, question. But when skinning controls/elements I'm usually using the following concept (I don't know the correct name, but I first saw it when creating custom WinXP themes). The basic idea is to set up a sort of margins in the image that restrict resizing, only the inner parts are allowed to stretch.
http://img42.imageshack.us/img42/6188/image7rq.jpg
When using this method in my regular programming work life is easy, I just BitBlt the four corner and then StretchBlt the remaining parts into place. However I'm no expert on HTML and I cannot find anything on the internet about it. It's kinda difficult to search when you don't exactly know the name of the concept...
a) How is this method called?
b) Does anyone know how to do this using HTML, CSS, Javascript, etc.? Preferably I would like the background of a DIV element to be themed like this. It's the intention to not spend the rest of this day slicing images in Photoshop ok, that makes me feel so utterly miserable..
There's several ways to approach this. If you are allowed to target newer browsers and allow old browsers to degrade to square corners and non-gradient backgrounds, check out the new CSS 3 features.
If, however, you need to be able to support old browsers, you're going to have to fire up Photoshop, create some background images, and nest some html elements. If your background only has to scale in one direction (verically or horizontally) check out the sliding door technique.
Wouldn't be easier to use css instead? Check thishttp://jonraasch.com/blog/css-rounded-corners-in-all-browsers or do a search for 'css rounded box' or 'css rounded corners'
I'm looking for a way to create an interactive bullet graph, which will allow the user to click anywhere in the graph and set a marker, then calculate some simple values based on where this marker is at. For example, I'd like it to look similar to this:
http://www.usrecordings.com/test-lab/bullet-graph.htm
Yet, allow the user to click inside it and have it calculate values. I don't want the user limited to the axis values either, it should be able to figure out what the value is between them. Has this been done anywhere before or do I need to start something from scratch?
Flot may be able to do what you need.
Check out some of the examples, particularly the interactive one. It's open source, so you can add any functionality you need to it. This should be a good starting point.
HTML canvas is a great place to start. A brief google search showed there may not be many interactive charts available. These are a couple HTML canvas examples, the first being math, the second the w3c spec: Polynomials, HTML Canvas w3c. I've found that searching for HTML canvas game examples produce many more tutorials than straight HTML canvas examples. I don't know what your programming abilities are, so I'm giving you these links with the assumption you have javascript experience.
Have fun.
Oh and thanks for asking if it's been done before.