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> |
