How to Use Fill in the States
Embedding your colored-in map on your site is not very difficult, if you know a little bit about how to edit HTML code on your site. The URL for a map is:
followed by a comma-separated list of the abbreviations of the states you want colored in. For example, if you want to color in California, Arizona, New Mexico, and Texas, your link would look like
(go ahead, you can click it, and it will open in another tab/window).
Suppose, however, that you have visited 46 of the 50 states, and you don’t want to have to type out the abbreviations for ALL of those states! Well, just change the variable from “visited” to “notvisited” and list the states that you don’t want colored in! For example:
will now color in all the states except California, Arizona, New Mexico, and Texas.
Additional customization options include height, width, background color, and two quick syntaxes for coloring all or none of the states:
Parameters are separated by “&”, and include:
width: "w=###" (where "###" = the number of pixels for the width, e.g., "w=300", cannot be higher than 400)
height: "h=###" (same explanation as width, cannot be higher than 220)
background color: "bgcolor=######" (where "######" = hexidecimal value of a color, e.g., "bgcolor=FFFFFF" results in a white background)
color all states: "visited=all"
color no states: "visited=none"
So, for example, if I wanted a map that was 400 x 220 in size, had a light yellow background, and I had visited California, Nevada, and Arizona only, my URL would look like this:
Which results in this:
If I wanted all the states colored, but a background color of navy blue, I would use:
Which results in this:
Next, to actually put it on your site, you have two choices, img tag or iframe. (Iframes will not work on wordpress.com or other free blogging sites that don’t allow iframes or script tags, so you’ll want to use the img tag.)
For img use, use the following syntax:
<img width="300" height="200" src="http://www.fillinthestates.com/map-img.php?visited=CA,AZ,NM,TX" />
The image will show up at that point in your page! (If you use the custom width and height parameters in the URL of the image src, make sure to adjust the “width” and “height” to reflect the numbers you are using.)
For iframes, here’s the syntax:
<iframe width="300" height="200" scrolling="no" border="0" src="http://www.fillinthestates.com/img-map.php?visited=CA,AZ,NM,TX"></iframe>
(for our first example of the four states we visited). That results in a display like this:
Soon, we hope to add the ability to customize the state colors! Stay tuned!