Safari 5+
Chrome 13+
Firefox 3.6+
Opera 11+
IE 7+

Hotspotter is cool new way to add hot spots to your images, you can build amazing responsive hot spots with just point & click no need to mess with code because there's a powerful Editor that will help you do all kind of spots you see here , you can also use the plugin to easily create custom spots!

It's as simple as:

$('.hs-area').hotspotter();
            
Lungern, Switzerland
Lungerersee
Mayor House

Swiss Chalet: is a type of building or house, native to the Alpine region in Europe, made of wood, with a heavy, gently sloping roof with wide, well-supported eaves set at right angles to the front of the house. "Click on spot to open wikipedia article"

Western Coast

Default spots & tooltips you can easily create in the editor , hover/click on above spots to show features. Also look at the browser icons image at the top right of this page which also use the plugin.

What you can do:

A unique & amazing feature of hotspotter is the ability to focus parts of the image with aiming effect that will enable you to provide more detailed information about it in a totally unobtrusive way.

You can use it with any spot , even with your custom spots , Example:

Yalta summit 1945

Joseph Stalin 1878-1953

The de facto leader of the Soviet Union from the mid-1920s until his death in 1953. Among the Bolshevik revolutionaries who brought about the Russian Revolution in 1917, Stalin was appointed General Secretary of the party's Central Committee in 1922. Through expanding the functions of his role, Stalin managed to consolidate power following the 1924 death of Vladimir Lenin, while eliminating any opposition. He held this nominal post until abolishing it in 1952, concurrently serving as the Premier of the Soviet Union after establishing the position in 1941.

Franklin D. Roosevelt 1882-1945

The 32nd President of the United States (1933–1945) and a central figure in world events during the mid-20th century, leading the United States during a time of worldwide economic depression and total war. A dominant leader of the Democratic Party and the only American president elected to more than two terms, he built a New Deal Coalition that realigned American politics after 1932, as his domestic policies defined American liberalism for the middle third of the 20th century.

Winston Churchill 1874-1965

A British politician, best known for his leadership of the United Kingdom during the Second World War. Widely regarded as one of the greatest wartime leaders of the 20th century, he served as Prime Minister twice (1940–45 and 1951–55). A noted statesman and orator, Churchill was also an officer in the British Army, a historian, a writer, and an artist. He is the only British prime minister to have received the Nobel Prize in Literature and was the first person to be made an Honorary Citizen of the United States.

Admiral of the Fleet Sir Andrew Cunningham
Marshal of the RAF Sir Charles Portal
Fleet Admiral William D. Leahy

Note that there's no aiming effect in this spot, just show the tooltip outside image!




Mayor House

Swiss Chalet: is a type of building or house, native to the Alpine region in Europe, made of wood, with a heavy, gently sloping roof with wide, well-supported eaves set at right angles to the front of the house.

Pump Compartment

Try resize image below:

Lungern, Switzerland
Mayor House

Swiss Chalet: is a type of building or house, native to the Alpine region in Europe, made of wood, with a heavy, gently sloping roof with wide, well-supported eaves set at right angles to the front of the house. "Click on spot to open wikipedia article"

Western Coast

You will only need to edit one image in the editor, then you will be able to use different sizes of the same image in your website as the plugin will automatically detect image dimension , scale and reposition spots on it, you can also use it with fluid images & adjust spots with window resize.

You have image with lots of details , want to point visitors to a specific part in it , you can now have a direct link to your spot like:

http://www.yoursitename.com/page.html#SpotName

by giving your spot a name in the editor. When navigating to this URL the plugin will automatically scroll the page to where the image is located & trigger spot!

Note that if the browser is already pointing to one of this links, clicking it again won't reactivate spot. if you want such effect use javascript instead, see next section

Try this links (opens in a new window):

Swiss Chalet

Mayor House


Or use it to trigger a spot in the current page,Try this links (the page won't reload, this feature will not work with IE7):

Western Coast

Swiss Chalet

Plugin Internet Explorer Support

You can trigger & untrigger spots , check if spot is active or not and show/hide all spots on image, Example:

Mercury
Venus
Our Cool Planet!
Mars

Jupiter

Volume: 1.4313×1015 km3
Mass: 1.8986×102727 kg
Orbital Period: 11.8618 year
Mean Radius: 69,911 ± 6 km
Mean Density: 1.326 g/cm3
Saturn
Uranus
Neptune


//Show / hide all spots
$("#area").hotspotter("show");
$("#area").hotspotter("hide");
    
    
//Trigger / untrigger a spot
$("#myspot").hotspotter("trigger");
$("#myspot").hotspotter("untrigger");
    
    
//Detect if spot is active or not
$("#myspot").hotspotter("isActive");
                

From start , the plugin was designed to be flexible & easily extensible even for those with no code experience , here's what you can do with it:

Author z-B aka Basm , see CodeCanyon Profile

Lungern image provided by Michael Siegenthaler http://www.msigi.net