title: Button Image on Current Page
body: <p>I currently have image-links on my navbar, as well as additional images for when you're hovering over the link. I would like to know the best way to set it so the current page a user is on shows a third image.</p>
  
  <p>For example, user is on index.html, which would be Home on the navbar, so I would like Home to be a different image than About, Contact, etc. This is my current HTML and CSS.</p>
  
  <pre><code>&lt;ul id="navbar"&gt;
      &lt;li id="bf"&gt;&lt;a class="button" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li id="bf"&gt;&lt;a class="button" href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li id="bf"&gt;&lt;a class="button" href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li id="bf"&gt;&lt;a class="button" href="images.html"&gt;Images&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#navbar {
      left:50%;
      margin-left:325px;
      top:50%;
      margin-top:-100px;
  }
  
  #bf {
      display:inline;
  }
  
  a.button {
      display: -moz-inline-stack;
      display: inline-block;
      width: 147px;
      height: 49px;
      background: url("/images/btn.png") no-repeat;
      line-height: 43px;
      vertical-align: text-middle;
      text-align: center;
      color: #180a6b;
      font-family: Verdana;
      font-size: 25px;
      font-weight: normal;
      font-style: normal;
      text-shadow: #FFFFFF 1px 1px 0;
      text-decoration: none;
  }
  
  a.button:hover {
      background: url("/images/hovbtn.png") no-repeat;
      color: #8d8fc2;
  }
  </code></pre>