Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've been trying to figure out how to make a picture have different points where the user can click on one and it will display a description.
It's the same concept as an interactive map, just it's not a map, it's just a picture. The image would be for a website.
Something similar to this codepen (http://codepen.io/ scarl3tt/details/jEBmyG) but i can't get it to work with a different image.
I'm not fluent in either CSS, HTML or JS. However, I am fairly good with both CSS and HMTL.
So I'm wondering, how would I code it? OR is there a tool that generates the code automatically?
Thanks in advance
Joe
You should create an image map using the <area> and <map> tags
There are lots of generators available online too, just do a Google Search
You can also check out this question for more tools used to create Image Maps
With your skills you should use htmlmaps and catch the basic behavior via simple js id-hover/onclick catching.
The useful generators for maps can be found in google.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
So I've seen a mouse-hover effect on 2 websites so far and I really like it.
This is the effect I'm talking about.
I'd be grateful if somebody can tell me how to get that effect on my webpage.
It only appears under your cursor when you hover over the page.
The site you have linked in the comments uses the HTML canvas element. But You can simply use already existing libraries for that effect.
Examples mentioned in the comments:
http://jnicol.github.io/particleground/
http://github.com/VincentGarreau/particles.js
Simply, Go to the webpage you wanted to Copy it's effects or anything from it
Right click, View page source
If the effect is made by Css, you will find it in stylesheets tab
If it's using jQuery/Js, Search the head for <script> , Read them and copy the effect (assuming that you understand js/jquery
For more simplicity, use Firebug, open it and just point the cursor at the item you want to see it's source.
But, actually
You can find it at github Here
Change what you want.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I found this site Storj.io. I really like the design of the site and was looking at the header. There is a background-image and then on top of this there are those points that are moving. How can such a animation be achieved? Is this done with html5 and how or is JavaScript used?
Inspection reveals they are using Particles.js
Particles JS
They provide documentation to get you started and achieve the effect you are looking for.
Your question is too broad for a complete answer. Try asking about smaller parts of it when you get stuck.
From Scratch: In essence you'll want to look into using the <canvas> element to draw particles. Take a look at this simple example of what can be done. Here is a blog post on particles with canvas to get you going (which culminates with the previous example).
With a library: https://storj.io is using particles.js. But that doesn't tell you how it's accomplished. On the plus side though, the library can easily be included from https://github.com/VincentGarreau/particles.js/ (see the demo on codepen).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm looking to create a web page that incorporates an image of a house - with various parts of the house responsive to mouse clicks. The house would be the single primary element on the page.
Given that I will probably employ an illustrator to make an image, should I:
try and make it 'box-like' so that I can do it in HTML5/CSS3
use SVG to get as close to the design as possible
use an imagemap and Javascript for detecting the clicks on the image
if it was a chart-type infographic, I would use a charting JS library but it's more of a custom image.
Links to informative URLs or example pages would be greatly welcomed.
I'd suggest using SVG.
In this way you don't compromise on the quality of the image yet you retain an easy way to 'assign' certain parts of the image to have event handlers attached to them.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a image gallery using Html 5 Canvas and when I hover a image, it must grow and change opacity. In addition to image selectable and draggable?
How can I do this? Any ideas?
Well sir, first try to code anything and then come to ask for assistance with particular problem. For now it looks like you have no clue about subject and not even tried. I can anwser a question like how to manipulate opacity in canvas, how to implement drag and drop, etc...
but NOT I need someone to implement my whole idea for me
I should also point out that Canvas isn't probably the best technology for this task (in the meaning of both performance and implementation difficulty).
If you insist, you will have to rewrite all functionality which is already easily accessible with DOM and libraries like jQuery.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I want to make an image map editor like this one
http://www.maschek.hu/imagemap
Are there any jquery plugin to do so ?
Thanks in advance.
This image map editor can be found here: http://code.google.com/p/imgmap/.
Pretty late response, but maybe someone will find it useful.
I haven't seen a jQuery plugin to do exactly that, but it wouldn't be too hard to create.
There are several jQuery plugins available to select an area on an image, a good example may be imgAreaSelect. You could allow visitors to upload an image, then serve imgAreaSelect with a button "add to image map" which stores the coordinates and resets the image selection. Repeating this would add more rectanges to the map. A final button would generate HTML imagemap code based on the stored selections.
Hope that helps point you in the right direction