An easier way than explained below is to use a Google Drawing in Google Drive.
Insert>Drive>Drawing
Also see this example in New Sites: https://sites.google.com/view/newsitestesting/links/image-map
![]() Below example, the code has been converted to a gadget. | To make an image map work you have to edit the HTML. I used an Image Map program to create the code.
The program I used is MapEdit
Here is the HTML of the result: Note: Hosting these files in Google Drive is being discontinued so I recommend using DropBox instead. You can also host your XML files in a file cabinet page in a Google site. HTML files will have to be converted to gadgets. See THIS SITE
<DIV style="DISPLAY: block; TEXT-ALIGN: left"><IMG src=" http://sites.google.com/site/k8omsbob/imagemap/imagemap.jpg " useMap=#imagemap border=1></DIV> <DIV><MAP name=imagemap> <AREA title="Shiawassee Arts Center" shape=RECT alt="Shiawassee Arts Center" coords=24,5,195,39 href=" http://www.shiawasseearts.org/sac.htm "> <AREA title="Shiawassee Regional Chamber" shape=RECT alt="Shiawassee Regional Chamber" coords=76,49,392,87 href=" http://www.shiawasseechamber.org/ "> <AREA shape=RECT alt="" coords=0,0,0,0></MAP></DIV> Creating an image-map (from "prac")
More info
Gadget code:
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="imagemap" /> <Content type="html"> <![CDATA[ <div style="display:block;text-align:left"><img border="1" src="https://sites.google.com/site/k8omsbob/imagemap/imagemap.jpg" usemap="#imagemap"></div> <div><map name="imagemap"> <area target="_blank" alt="Shiawassee Arts Center" coords="24,5,195,39" href="http://www.shiawasseearts.org/" shape="RECT" title="Shiawassee Arts Center"> <area target="_blank" alt="Shiawassee Regional Chamber" coords="76,49,392,87" href="http://www.shiawasseechamber.org/" shape="RECT" title="Shiawassee Regional Chamber"> <area target="_blank" alt="" coords="0,0,0,0" href="http://www.k8oms.net" shape="RECT"></map></div> ]]> </Content> </Module>
|