quickest way to make clickable imagemap of the US - javascript

what is the quickest way to make clickable imagemap of the US? Is there any jquery plugin available for this?
Thanks

My plugin, that offers some features different from the others mentioned: http://www.outsharked.com/imagemapster
But generally speaking if all you want is a "clickable map" you don't even need jQuery - just use an HTML image map, and bind a click event to an area. But using the plugin offers feature like area highlighting/selection/grouping and so on.

Try to use this jQuery plugin: http://jvectormap.owl-hollow.net/

I created a mapping solution using SVG and jQuery which is accessible at
Makeaclickablemap.
Creating and saving a clickable US map is free, but it is also possible to commit edits later and there are also many other maps available.

Just use one of "image map generators" there are a lot of them in the internet. You don't even need JS for that. Here is the link to one of them: http://www.image-maps.com

Hi found the thing i was looking for here - Using JQuery hover with HTML image map
thanks :)

Related

creating custom interactive map using jquery and html5

I want to create a custom interactive map which will be similar to this one: http://shows.marketart.com/surf10/
the example is developed using flash, and I want to make somthing similar to it using jquery and html5 if possible, the main requirements are: zooming, plotting on the map,
thank you in advance for any recommendations
regards,
I see two possibilities:
1- Do a image map and use a image point plugin like This with a tooltip plugin, if you need.
2- See this Question and do with css and use tool tip plugin.
For zoom, you can easy use a Jquery plugin
There are similar jQuery plugins too. For example:
http://www.virtualsen.se/map/

A Way for Presenting Useful Links in the Website

I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!

How to implement "Drag-Select" functionaility within Javascript?

I would like to implement some "Drag-select" functionality into a project of mine but i'm unsure how to implement it.
The creation of the selection area is not a problem, it's the capturing of elements within the area itself which is confusing me.
A jQuery example found here.
Selectable Demo
If you can use jquery there are some plugins that do this operation. Anyway you can check if the position of the element is contained into the selection area coordinates and, if it is, you select it.
Script.aculo.us has a nice implementation of drag-n-drop, but then you have to include this rather large library. Or you could investigate how they done it for that matter, since its open-source.

Javascript based interactive map application

Greetings,
I'm looking for a quick way of slicing the map of a country by regions and when clicked on a specific region, showing some gui with the info of the region. I am looking for a quick framework, plugin or such to achieve this swiftly. I know it can easily be achieved using flash but I want to rely on javascript instead.
Cheers
have you had a look at Seadragon? I know it will do the slicing and the zooming for you but you'd probably have to extend it by yourself to get an info window to pop up.
You may have a look at http://www.openlayers.org
Have you checked Web Maps Lite from CloudMade?
http://developers.cloudmade.com/projects/show/web-maps-lite
You may just add CM.Polygon for each region, and then processes onClick event.
Combine these two examples:
http://developers.cloudmade.com/projects/web-maps-lite/examples/info-window
http://developers.cloudmade.com/projects/web-maps-lite/examples/polylines-and-polygons

Dynamic Floating window by javascript

I want to build a dynamic floating window with close button at corner. Is it possible, and also i want to add some content dynamically into that window.
Please help me.. It should be in javascript.. Better without AJAX..
Thanks in Advance
jQuery UI has an awesome floating window. What's cool about the jQuery UI version is that you can also package it with the UI theme manager, which means less time styling.
Check it out here : jQuery UI Dialog examples
All it takes is creating a container (probably a div), and one line of code. Something like this:
<div id="example">I'm in a dialog!</div>
$("#example").dialog();
Here's the documentation: jQuery UI Dialog documentation
What you are looking for is called a "lightbox" technique.
Here is a comparison of many lightbox techniques.
Many exist out there on the web, here are some for jquery and prototype libs:
Jquery: Thickbox, Lightbox
Plugin
Prototype: Lightbox 2,
Leightbox
Also, check out the
wikipedia article on lightbox.
My favourite has always been Scriptaculous, which lets you do all sorts of interesting visual things. The new kids on the block use jquery. One of these two should do the trick for you.
There are lots of samples on both sites that do what you want.
Well at the most basic just create a div and inject content by setting innerHTML to an HTML string. Positioning it can be tricky since you have to worry about scrolling and different browsers have different means of controlling this. You may also want to position relative to some originating element in the page which you can do by digging the element and it's position out of the event object your javascript function receives when the originating element is clicked.
Google hover popup - first link is http://www.calcaria.net/javascript/2006/09/javascript-hover-over-html-popup.html
There are lots of different libraries out there for making windows. I have found that Livepipes has a very well rounded and customizable javascript library that includes a window control along with a variety of others. http://livepipe.net/control
One that I haven't used but looks promising, is prototypeui. It is based on the prototype and scriptaculous javascript libraries. jqModal is another I have used that is based on JQuery.
take look at fancybox http://fancybox.net/

Categories

Resources