American Lung Association State of the Air: 2008 Banners

Dynamic Zip Code Widgets

The following interactive banners are functioning examples of how the zip code widget works. Type a zip code in the box provided to dynamically link to the 'State of the Air' report grade for that local area. Download all of the images for each banner and copy the code provided below. Contact us with any questions.

Dynamic Widget

this is the main (background) image. save as: blue_360x60_zip.gif

this is the 'go button' (input type) image. save as: zipcode_blue.gif

<style>
#zip2fips form {padding:0; margin:0;}
#zip2fips .input-zip-125 { width: 65px; font-size:11px; margin-bottom:6px; margin-right:2px; padding-right:0px}
#zip2fips .input-submit-125 {margin-bottom:0px; padding-bottom:5px; margin-left:2px; padding-left:0px;}
</style>

<table border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#99CC66" id="zip2fips" style="background:#98CA65 url(blue_360x60_zip.gif) top left no-repeat; width:360px; height:60px; padding-bottom:0px; padding-right:0px;" align="right" valign="bottom">

<form action="http://www.stateoftheair.org/zip2fips.jsp">
<input name="zip" class="input-zip-125" size="15" maxlength="25">
<input name="Go" type="image" value="Go" class="input-submit-125" src="zipcode_blue.gif" width="15" height="15">
<input type="hidden" name="redirectURL" value="http://www.stateoftheair.org/2008/states/*FIPS*.html">
<input type="hidden" name="errorURL" value="http://www.stateoftheair.org/no-zip-found.html">
<input type="hidden" name="disambiguationTitle" value="Please choose one of the following counties">
</form>

</td></tr></table>

Dynamic Widget

this is the main (background) image. save as: blue_300x100.gif

this is the 'go button' (input type) image. save as: zipcode_blue.gif

<style>
#zip2fips form {padding:0; margin:0;}
#zip2fips .input-zip-125 { width: 65px; font-size:11px; margin-bottom:6px; margin-right:2px; padding-right:0px}
#zip2fips .input-submit-125 {margin-bottom:0px; padding-bottom:5px; margin-left:2px; padding-left:0px;}
</style>

<table border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#99CC66" id="zip2fips" style="background:#98CA65 url(blue_300x100.gif) top left no-repeat; width:300px; height:100px; padding-bottom:0px; padding-right:0px;" align="right" valign="bottom">

<form action="http://www.stateoftheair.org/zip2fips.jsp">
<input name="zip" class="input-zip-125" size="15" maxlength="25">
<input name="Go" type="image" value="Go" class="input-submit-125" src="zipcode_blue.gif" width="15" height="15">
<input type="hidden" name="redirectURL" value="http://www.stateoftheair.org/2008/states/*FIPS*.html">
<input type="hidden" name="errorURL" value="http://www.stateoftheair.org/no-zip-found.html">
<input type="hidden" name="disambiguationTitle" value="Please choose one of the following counties">
</form>

</td></tr></table>

Dynamic Widget

this is the main (background) image. save as: grey_300x100_zip.gif

this is the 'go button' (input type) image. save as: zipcode_grey.gif

<style>
#zip2fips form {padding:0; margin:0;}
#zip2fips .input-zip-125 { width: 65px; font-size:11px; margin-bottom:6px; margin-right:2px; padding-right:0px}
#zip2fips .input-submit-125 {margin-bottom:0px; padding-bottom:5px; margin-left:2px; padding-left:0px;}
</style>

<table border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#99CC66" id="zip2fips" style="background:#98CA65 url(grey_300x100_zip.gif) top left no-repeat; width:300px; height:100px; padding-bottom:0px; padding-right:0px;" align="right" valign="bottom">

<form action="http://www.stateoftheair.org/zip2fips.jsp">
<input name="zip" class="input-zip-125" size="15" maxlength="25">
<input name="Go" type="image" value="Go" class="input-submit-125" src="zipcode_grey.gif" width="15" height="15">
<input type="hidden" name="redirectURL" value="http://www.stateoftheair.org/2008/states/*FIPS*.html">
<input type="hidden" name="errorURL" value="http://www.stateoftheair.org/no-zip-found.html">
<input type="hidden" name="disambiguationTitle" value="Please choose one of the following counties">
</form>

</td></tr></table>

Dynamic Widget

this is the main (background) image. save as: blue_300x100_b.gif

this is the 'go button' (input type) image. save as: zipcode_blue.gif

<style>
#zip2fips form {padding:0; margin:0;}
#zip2fips .input-zip-125 { width: 65px; font-size:11px; margin-bottom:6px; margin-right:2px; padding-right:0px}
#zip2fips .input-submit-125 {margin-bottom:0px; padding-bottom:5px; margin-left:2px; padding-left:0px;}
</style>

<table border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#99CC66" id="zip2fips" style="background:#98CA65 url(blue_300x100_b.gif) top left no-repeat; width:300px; height:100px; padding-bottom:0px; padding-right:0px;" align="right" valign="bottom">

<form action="http://www.stateoftheair.org/zip2fips.jsp">
<input name="zip" class="input-zip-125" size="15" maxlength="25">
<input name="Go" type="image" value="Go" class="input-submit-125" src="zipcode_blue.gif" width="15" height="15">
<input type="hidden" name="redirectURL" value="http://www.stateoftheair.org/2008/states/*FIPS*.html">
<input type="hidden" name="errorURL" value="http://www.stateoftheair.org/no-zip-found.html">
<input type="hidden" name="disambiguationTitle" value="Please choose one of the following counties">
</form>

</td></tr></table>