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 creating and using an image map. This is an image with areas of any size and shape, which - when clicked - let you execute a FPP command. The image of course doesn't necessarily have to be a map - it could be anything, like a house, a text list or a collection of items.

Plugin parameters are read from an external xml file.

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="images/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 helpful for marking your areas in the image. Just write setupMode="1" in the <image> 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. When you are 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 test it by doing a mouse-over.

Note that your XML file can not be changed in any way by the plugin. If you want to save your area, you have to copy the text in the box and paste it into your text editor.

Example plugin XML file 

<?xml version = '1.0'?>
<imagemap 
   url="img/departement.png" 
   borderColor="#000000" 
   borderWidth="2"
   areaColor="#0000FF"
   setupMode="0"
>
   <area 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="pano.pan=83,300;pano.tilt=-8,300;pano.zoom=2,300" 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>244;105-263;108-284;113-293;113-305;126-308;139-305;152-300;154-294;151-290;155-289;163-272;166-270;161-267;156-259;155-253;156-239;137-237;128-237;122-234;114-240;112-259;122-260;129-276;134-277;123-273;118-267;118-261;121-254;121-241;111-</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="pano.pan=177,300;pano.tilt=-4,300;pano.zoom=2,300" onClick="fakeMsg.text=Bretagne ;global.showFake()">
      <coords>85;197-32;171-26;176-10;158-21;149-3;134-19;122-46;123-53;119-72;116-84;135-95;129-102;134-115;130-123;139-129;141-134;138-141;143-137;152-140;161-130;182-125;178-116;183-98;187-98;193-</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="pano.pan=-98,300;pano.tilt=-7,300;pano.zoom=2,300" onClick="fakeMsg.text=Centre ;global.showFake()">
      <coords>178;218-185;204-186;196-194;193-209;178-211;166-207;155-212;151-208;136-220;129-229;129-236;122-238;136-251;152-252;157-259;156-268;157-272;163-271;166-289;165-294;174-287;189-287;197-285;210-293;229-290;239-275;247-273;256-267;255-263;261-252;261-249;258-238;263-228;264-221;262-210;250-201;231-195;232-188;230-</coords>
   </area>
   <area tooltip="Poit ou Charentes" onClick="fakeMsg.text=Poit ou Charentes ;global.showFake()">
      <coords>128;306-121;282-132;291-129;273-131;263-152;265-153;247-148;238-140;227-152;228-159;221-172;223-178;219-188;228-187;231-195;232-199;230-209;243-211;251-212;252-217;255-221;264-205;275-208;281-210;286-199;302-193;306-187;316-178;327-170;333-168;334-161;332-158;330-157;324-145;318-135;310-</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="pano.pan=-18,300;pano.tilt=-9,300;pano.zoom=2,300" 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>