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();
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"
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:
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.
Note that there's no aiming effect in this spot, just show the tooltip outside image!
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.
Try resize image below:
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"
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 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
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: Basem , see CodeCanyon Profile
Lungern image provided by Michael Siegenthaler http://www.msigi.net