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


Current version: 1.0

Zip file

Test page
VRSmarty XML file
Plugin XML file

Test page in setup mode
Plugin XML file

imagemap.swf
A VRSmarty 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 VRSmarty command. The image of course doesn't necessarily have to be a map, it could be anything, like a floor plan, a text list or any collection of items - any image will do.

A setup mode makes it very easy to add image areas.

The following parameters are supported:

In VRSmarty xml file:
xmlFilexmlFile='myImage.xml'plugin control XML file, default=imagemap.xml



Plugin 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()"VRSmarty command to execute when area is clicked
onOveronOver="global.func2()"VRSmarty command to execute when mouse-over area
onOutonOut="global.func3()"VRSmarty command to execute when mouse-out area
tooltip tooltip="Paris"
tooltip="img/Paris.jpg"		 tooltip text at mouse-over
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, in setup mode, your XML file can not be modified 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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>



Version history: