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
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:xmlFile | xmlFile=imagemap.xml | read plugin area data from this XML file |
default=imagemap.xml |
In external xml file:
In <imagemap> tag: | ||
url | url="img/map.jpg" | image url |
borderColor | borderColor="#000000" | image border color, if missing - no border will be drawn |
borderWidth | borderWidth="2" | border width, default=1 (hairline) |
areaColor | areaColor="#0000FF" | area mouse-over color, default=#0000FF, |
set areaColor="none" for no mouse-over color | ||
areaAlpha | areaAlpha="0.5" | alpha value of area mouse-over color, default=0.35 |
keepClicked | keepClicked="1" | 1=the last clicked area will stay marked, default=0 |
setupMode | setupMode="1" | makes plugin enter setup mode (see below) |
In <area> tag: | ||
selected | selected="1" | area will be marked from start (only with keepClicked="1") |
onClick | onClick="global.func1()" | FPP command to execute when area is clicked |
onOver | onOver="global.func2()" | FPP command to execute when mouse-over area |
onOut | onOut="global.func3()" | FPP command to execute when mouse-out area |
tooltip | tooltip="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.
" as %22
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>