Image Map Editor [closed] - javascript

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

Related

How can I get the same effect on my webpage? [closed]

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.

Small tiles that get bigger when clicked [closed]

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 want to create a webpage with several small tiles that enlarge when clicked (And show more/different content, but that's not a part of this question).
This is what I have now: http://puu.sh/nX929.png
When I click on the first tile, it looks exactly like I want it to: http://puu.sh/nX9l9.png
But when I click the second tile it looks like this: http://puu.sh/nX95G.png (gap on the left)
That's not what I want, I want to other (small) tiles to float around it. To fill the empty space.
The source code (+ live example) can be found here (but I wouldn't mind doing it in a completely different way): https://www.crescendosassenheim.nl/Hugo/Training/
I don't even know what to Google, because I have absolutely no idea what kind of technique I can use to achieve what I want. Any suggestions?
http://masonry.desandro.com/methods.html Take a look at this I am sure this will help you, what you want is even displayed at the bottom of the page i am linking.
Download masonry in your computer link to it and follow the little guide in their website.

How can I make an image interactive? [closed]

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.

magnifier for HTML document [closed]

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 have a page and I want to create a magnifier for my web page (HTML document not just images), I want do this for some reasons and I just want to know How can I do it? and is this possible?
Nothing is impossible, the word itself says " I'm possible"! Audery Hepburn
I know it's possible for professional programmers, and I'm just asking from them, How to do it?
I need lens magnifier and for all document, something like Windows magnifier
I searched on the Internet but there are just magnifiers for Images, and I need magnifier for all HTML document, and I don't expect you do it for me, I know JavaScript programming and I just need your suggestions and helps to find a way.
Take a look to Zoomooz. "It is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom."
Source:
http://jaukia.github.io/zoomooz/
https://github.com/jaukia/zoomooz
https://github.com/m-kermani/magni
I hope it helps :)

Html 5 Canvas image Gallery [closed]

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.

Categories