First, we found sources from Chinese archives that contained information we wanted to present. We typed up this information by hand (which took a fairly long time), and then I played around with find and replace in a text editor for a while to get the typed up data into a decent HTML format. We gave each province its own HTML file containing data for just that province.
I then created another HTML file which contained an HTML image map of a map of China (we call it the “map image map”). I put a rectangular click box around the name of each province. I then created yet another HTML file, which contained two iFrames, one to show the map, and one to show the data. I then wrote in the links in the “map image map” to control the other iFrame.
After writing all of the HTML, I uploaded the HTML files for the map and provinces to the website, created a new page, and put in the code for the two side-by-side iFrames into an HTML element in Weebly.
Here’s the code for the “main” HTML that displayed the two iFrames side-by-side:
<iframe name="mapframe" id="mapframe" src="http://18069595.nhd.weebly.com/files/theme/mapframe.html" height=400 width=58%></iframe> <iframe name="dataframe" id="dataframe" src="http://18069595.nhd.weebly.com/files/theme/dataframe.html" height=400 width=40%></iframe>
Here’s what one of the links looks like in HTML to control another iFrame (note the
<a href="/files/theme/map_guangdong.html" TARGET="dataframe" id="rectangle11">