Home -> FPP plugins page -> imagemap.swf
This plugin is completely free for use in any context or connection.
imagemap: hotspot plugin for creating and using an image map


Current version: 1.3

Zip file

Test page
FPP XML file
Plugin XML file

Test page in setup mode
Plugin XML file

Test page 2
Plugin XML file 2

imagemap.swf
FPP hotspot plugin for handling an image map. It works like an ordinary HTML image map, which is an image divided into areas of any size and shape. Each area can have its own tooltip and onClick and onOver commands. The image of course doesn't necessarily have to be a map. It could be anything - like an apartment plan, a text list or a collection of items.

The setup mode can be used to easily define your image areas.

The following parameters are supported:

Attribute in FPP xml file <spot> tag:
xmlFilexmlFile=imagemap.xmlread plugin area data from this XML file
default=imagemap.xml


In external xml file:

In <imagemap> tag:
urlurl="img/map.jpg"image url
borderColorborderColor="#000000"image border color, if missing - no border will be drawn
borderWidthborderWidth="2"border width, default=1 (hairline)
areaColorareaColor="#0000FF"area mouse-over color, default=#0000FF,
set areaColor="none" for no mouse-over color
areaAlphaareaAlpha="0.5"alpha value of area mouse-over color, default=0.35
keepClickedkeepClicked="1"1=the last clicked area will stay marked, default=0
setupModesetupMode="1"makes plugin enter setup mode (see below)
In <area> tag:
selectedselected="1"area will be marked from start (only with keepClicked="1")
onClickonClick="global.func1()"FPP command to execute when area is clicked
onOveronOver="global.func2()"FPP command to execute when mouse-over area
onOutonOut="global.func3()"FPP command to execute when mouse-out area
tooltiptooltip="Paris"tooltip text at mouse-over
tooltip="img/Paris.jpg"tooltip image at mouse-over
<coords>this child tag contains the area polygon coordinates:
<coords>86;292-93;301-93;309-99;320-92;332-97;356-...</coords>


NOTES:


If you are using the &" characters inside the "url", "onClick", "onOver", "onOut" or "tooltip" attributes in the xml file, you have to encode them as follows:

& as %26
" as %22

The setup mode is very useful for defining your image areas. Just write setupMode="1" in the <imagemap> tag and start up the pano. To make a new area, click on the button "New area" and then just click away in the image to mark the boundary of the area. The plugin will connect all your points with straight lines and also your last point with your first. You will not see anything happening while clicking, but when you're done, click on "Save Area". This will fill the text box with the <area><coords> XML tag that is needed to mark the area in your image. And you can immediately check the area by doing a mouse-over.

Note that the plugin is not allowed to modify your XML file. If you want to save your area, you have to copy-paste the generated XML tag in the text box to your text editor. And make sure to do it before clicking your area, because that will erase the XML tag.

Example plugin XML file 

<?xml version = '1.0'?>
<imagemap 
   url="img/departement.png" 
   borderColor="#000000" 
   borderWidth="2"
   areaColor="#0000FF"
   areaAlpha="0.5"
   keepClicked="1"
   setupMode="0"
>
   <area selected="1" tooltip="img/Paris.jpg" onClick="fakeMsg.text=Paris ;global.showFake()">
      <coords>86;292-93;301-93;309-99;320-92;332-97;356-98;373-94;391-87;389-79;381-59;381-54;377-46;373-44;380-30;365-23;356-17;351-16;330-28;317-38;306-45;307-53;304-67;307-76;302-</coords>
   </area>
   <area tooltip="Nord pas de Calais" onClick="fakeMsg.text=Nord pas de Calais ;global.showFake()">
      <coords>242;41-241;34-244;34-243;21-242;19-244;12-252;6-257;6-275;0-281;6-285;19-299;18-305;33-311;34-317;40-330;47-335;54-334;62-327;60-317;57-312;57-302;59-287;58-270;52-266;48-258;47-</coords>
   </area>
   <area tooltip="Picardie" onClick="fakeMsg.text=Picardie ;global.showFake()">
      <coords>233;58-242;48-240;43-245;40-257;47-266;49-271;53-285;58-296;60-307;59-314;57-333;63-333;75-328;83-327;93-321;98-313;98-314;102-316;107-311;109-313;118-307;126-298;120-292;112-286;113-270;109-245;105-244;97-244;77-245;72-244;66-</coords>
   </area>
   <area tooltip="Alsace" onClick="fakeMsg.text=Alsace ;global.showFake()">
      <coords>459;113-470;114-481;122-478;129-469;142-468;157-462;168-463;192-464;199-452;207-443;201-443;195-441;191-440;185-433;182-435;182-436;171-441;167-440;160-446;153-445;143-447;140-446;129-446;127-440;122-440;120-445;120-451;115-455;116-</coords>
   </area>
   <area tooltip="Lorraine" onClick="fakeMsg.text=Lorraine ;global.showFake()">
      <coords>374;84-383;89-387;86-399;93-405;89-420;96-435;108-449;107-457;113-454;116-449;117-445;120-440;121-441;125-445;127-447;141-446;153-440;160-441;168-437;171-435;182-433;181-426;177-420;178-416;173-409;175-404;173-399;175-390;167-388;159-382;153-378;147-368;141-364;137-360;128-360;122-363;117-360;105-364;99-367;85-</coords>
   </area>
   <area tooltip="Champagne Ardenne" onOver="" onClick="fakeMsg.text=Champagne Ardenne ;global.showFake()">
      <coords>334;63-346;66-355;53-360;61-363;74-374;84-368;85-365;99-360;104-364;120-358;122-366;140-379;149-381;154-389;162-390;168-398;175-390;183-389;190-381;193-375;193-363;187-363;180-354;172-336;177-325;175-319;168-312;161-309;155-303;153-305;148-308;140-305;128-313;116-311;110-316;107-312;101-313;98-320;99-326;92-327;83-333;74-</coords>
   </area>
   <area tooltip="Ile de France" onClick="fakeMsg.text=Ile de France ;global.showFake()">
      <coords>243;103-243;110-233;114-236;120-236;123-238;125-238;134-243;143-253;155-252;157-256;158-259;156-268;157-272;164-270;166-273;168-288;166-291;162-290;158-295;153-300;155-304;153-304;148-309;141-308;138-307;138-306;126-298;121-293;114-291;113-284;114-271;110-262;108-245;107-243;105-261;122-268;119-275;121-278;124-278;133-273;135-260;131-259;130-260;121-242;105-</coords>
   </area>
   <area tooltip="Normandie" onClick="fakeMsg.text=Normandie ;global.showFake()">
      <coords>125;137-128;132-126;121-129;114-123;102-125;99-119;83-117;70-127;74-137;69-143;79-146;91-177;96-191;89-187;84-190;76-210;67-224;65-233;58-244;67-244;79-245;94-242;109-234;115-238;121-231;128-222;129-209;135-213;150-210;155-210;163-202;158-193;149-190;144-179;147-175;141-151;143-141;142-134;138-129;140-</coords>
   </area>
   <area tooltip="Bretagne" onOver="" onClick="fakeMsg.text=Bretagne ;global.showFake()">
      <coords>124;137-114;129-101;134-97;129-85;136-81;134-81;131-73;121-73;118-62;118-59;119-53;119-54;122-49;125-34;123-23;124-15;127-10;131-11;140-22;138-27;145-20;145-16;142-11;144-23;151-23;154-16;153-11;156-10;158-17;161-18;167-20;173-22;173-29;169-35;171-38;176-44;176-57;183-67;191-75;187-79;191-75;195-86;198-91;196-98;196-98;189-100;187-107;185-116;185-125;180-131;183-132;179-136;172-139;169-140;162-138;155-141;142-137;139-133;139-130;142-125;142-125;137-</coords>
   </area>
   <area tooltip="Pays de la Loire" onClick="fakeMsg.text=Pays de la Loire ;global.showFake()">
      <coords>130;266-112;259-106;251-94;230-101;224-86;207-85;197-92;195-98;194-98;187-116;183-125;178-130;183-135;173-140;166-140;158-137;154-143;142-150;143-160;142-175;141-176;146-188;145-193;152-207;162-209;167-208;178-202;187-192;194-187;194-178;217-173;221-162;220-150;227-142;226-148;240-151;252-151;264-142;264-</coords>
   </area>
   <area tooltip="Franche Comte" onClick="fakeMsg.text=Franche Comte ;global.showFake()">
      <coords>379;261-382;258-379;253-381;249-380;237-374;231-386;214-380;203-384;198-380;192-387;191-390;186-390;183-404;173-409;176-417;173-420;178-426;177-434;183-440;185-444;203-446;207-442;217-425;235-423;244-416;253-409;262-407;260-399;270-390;264-386;269-</coords>
   </area>
   <area tooltip="Bourgogne" onClick="fakeMsg.text=Bourgogne ;global.showFake()">
      <coords>295;152-300;156-304;153-309;157-311;162-317;167-325;176-335;178-340;176-346;176-349;173-357;173-357;177-362;181-363;188-367;192-371;192-373;196-377;196-380;194-383;198-380;203-385;214-375;233-382;238-380;241-380;246-382;250-380;253-381;258-377;261-374;260-372;258-364;259-362;273-358;279-353;271-344;271-343;276-329;277-326;278-324;276-324;270-328;267-326;261-322;258-319;257-318;252-313;246-309;248-309;250-298;247-295;248-289;243-291;240-292;228-290;225-285;211-285;201-286;199-287;192-285;190-288;187-290;187-291;180-294;175-291;171-291;168-</coords>
   </area>
   <area tooltip="Centre" onOver="" onClick="fakeMsg.text=Centre ;global.showFake()">
      <coords>236;123-231;130-223;130-221;130-216;133-213;133-210;136-210;144-214;150-213;154-209;155-208;158-212;165-210;167-209;178-203;188-193;195-188;196-186;198-185;206-181;211-179;219-188;228-188;232-196;233-198;231-201;231-210;245-210;251-217;256-218;258-220;261-221;265-228;266-233;264-239;265-244;262-250;260-253;263-262;264-262;260-267;257-271;258-274;256-274;251-279;246-282;246-288;243-289;242-291;240-292;227-285;212-286;200-287;199-287;192-285;189-287;187-290;187-290;179-295;176-292;169-288;166-270;167-270;165-272;163-268;157-253;157-253;154-244;144-240;137-239;133-238;125-237;123-</coords>
   </area>
   <area tooltip="Poit ou Charentes" onClick="fakeMsg.text=Poit ou Charentes ;global.showFake()">
      <coords>132;266-131;281-134;286-131;291-121;282-121;288-127;297-127;301-130;306-135;312-139;312-144;322-148;322-152;325-156;325-158;332-164;335-170;335-176;330-182;326-182;322-191;313-191;311-194;307-199;305-199;301-204;297-205;296-205;293-210;290-210;287-206;283-205;275-207;272-211;271-220;264-220;261-216;255-210;251-209;246-211;245-205;239-202;231-198;232-196;233-191;232-189;231-188;228-178;219-177;219-174;223-170;222-161;222-156;225-152;228-142;227-142;233-149;238-149;241-152;246-152;252-150;260-153;263-149;266-143;264-134;264-132;265-</coords>
   </area>
   <area tooltip="Limousin" onClick="fakeMsg.text=Limousin ;global.showFake()">
      <coords>200;303-210;288-206;274-219;263-227;267-250;261-262;265-270;274-272;287-267;297-270;317-259;330-255;343-244;347-230;342-220;332-224;322-210;308-202;308-</coords>
   </area>
   <area tooltip="img/PACA.jpg" onClick="fakeMsg.text=PACA ;global.showFake()">
      <coords>340;434-342;432-342;428-348;424-346;421-353;417-353;413-362;405-362;401-359;397-357;385-360;384-363;387-373;384-375;384-380;389-385;389-391;394-397;390-395;384-386;379-388;374-392;373-394;372-392;368-399;360-409;352-420;349-420;344-415;343-415;336-425;339-428;337-440;336-443;341-443;348-450;353-452;363-447;368-447;377-467;393-471;390-477;393-476;400-471;416-439;440-438;449-416;459-405;457-395;450-384;441-377;442-372;440-377;432-374;428-371;436-364;441-349;438-344;437-</coords>
   </area>
   <area tooltip="Rhône-Alps" onOver="" onClick="fakeMsg.text=Rhône-Alps ;global.showFake()">
      <coords>410;261-406;277-414;276-415;270-430;261-440;272-442;282-446;291-442;302-445;308-454;324-450;334-442;338-439;336-429;337-425;340-415;336-416;343-420;345-420;349-412;353-409;352-401;359-394;365-392;370-394;373-388;373-387;379-394;383-397;389-390;394-384;389-377;387-375;384-371;385-365;386-361;385-357;386-348;385-345;383-340;385-334;382-327;370-324;368-323;359-342;342-345;331-342;330-342;325-336;323-329;325-324;322-327;319-327;313-321;308-320;304-317;301-316;291-320;287-320;275-323;271-325;278-331;276-343;276-343;272-351;271-353;270-358;280-361;274-363;261-366;258-372;259-379;262-379;266-387;270-390;267-392;267-397;271-405;266-405;261-</coords>
   </area>
   <area tooltip="Aquitaine" onClick="fakeMsg.text=Aquitaine ;global.showFake()">
      <coords>131;309-144;323-149;322-152;325-155;326-157;331-163;335-171;334-182;325-182;322-191;313-192;308-199;304-201;306-202;310-208;310-211;308-221;318-224;323-221;327-221;334-230;343-228;346-228;352-211;370-210;374-212;376-212;381-207;381-204;389-198;390-196;392-196;397-190;395-183;399-178;398-173;400-172;403-169;402-168;401-163;402-158;420-165;423-166;427-168;431-165;445-157;450-152;469-145;468-134;458-124;457-114;450-109;448-112;444-108;438-103;439-98;432-99;430-107;426-113;413-122;373-124;367-121;357-125;345-125;336-130;324-</coords>
   </area>
   <area tooltip="Languedoc Roussilon" onClick="fakeMsg.text=Languedoc Roussilon ;global.showFake()">
      <coords>238;482-245;481-252;477-252;474-246;474-243;468-248;459-245;450-240;448-237;443-241;439-241;437-248;433-256;437-260;434-271;436-276;430-274;422-279;424-285;420-291;419-291;413-301;408-306;401-301;396-302;390-297;389-295;387-295;377-292;372-291;368-289;365-290;356-293;352-296;352-303;347-307;355-313;354-314;352-323;358-324;368-328;369-330;377-333;378-339;386-345;384-347;385-352;384-357;386-358;397-362;401-362;405-354;413-354;417-347;421-348;424-341;434-333;430-312;444-302;446-294;457-292;483-297;491-294;493-285;493-278;501-268;497-257;499-248;495-239;487-</coords>
   </area>
   <area tooltip="Auvergne" onClick="fakeMsg.text=Auvergne ;global.showFake()">
      <coords>289;241-296;246-308;249-313;245-319;256-327;266-322;275-319;288-316;288-317;299-327;315-324;322-328;323-338;322-343;330-343;340-325;357-316;352-309;353-302;347-293;351-289;363-278;351-274;352-268;362-259;362-256;359-253;349-255;338-263;324-270;316-267;296-273;287-269;270-261;263-266;256-271;258-274;255-274;249-</coords>
   </area>
   <area tooltip="img/Midi-Pyrenees.jpg" onClick="fakeMsg.text=Midi-Pyrenees ;global.showFake()">
      <coords>152;467-153;457-156;450-164;444-168;435-167;430-165;423-158;420-161;410-160;408-164;401-168;401-169;403-172;402-173;399-179;398-183;399-191;395-194;397-195;394-198;390-204;389-205;383-208;381-211;381-212;376-210;374-210;370-228;353-228;346-231;343-237;345-240;348-247;348-254;345-254;353-256;355-255;360-258;364-267;364-275;353-279;351-282;353-285;357-285;361-288;366-290;366-292;369-292;374-296;376-295;378-294;381-295;385-295;387-298;390-303;390-301;395-306;401-294;413-293;412-291;414-291;419-286;419-280;423-275;422-274;427-275;431-271;435-263;436-260;434-259;437-254;437-250;433-246;433-238;442-241;449-245;451-248;458-246;463-243;467-246;473-251;473-253;475-252;478-243;481-238;483-227;481-199;469-196;472-192;479-172;474-165;475-160;471-157;469-</coords>
   </area>
   <area tooltip="Corse" onClick="fakeMsg.text=Corse ;global.showFake()">
      <coords>489;412-494;426-498;463-492;469-496;483-487;508-476;500-467;488-460;471-463;467-456;458-459;451-456;448-459;437-477;426-483;427-486;420-484;415-</coords>
   </area>
</imagemap>