Image Displaying Navigation Bar

Question

I want a navigation bar to display part of an image, but only display the image if you are currently on the page (say you click home, it'll uncover a part of the picture).. In other words, I want an image hidden in the bar that shows up only when the button is clicked. (Each button would have their own piece of the picture.)

Is it possible to do this using CSS and HTML?

Code for CSS Navigation Bar:

@nav_bar_background: #000000 center center repeat-x scroll;
@nav_bar_border: 0px solid @container_outer_border_color;
@nav_bar_border_radius: 0 0 0 0;
@nav_bar_button_color: #f2f3f5;
@nav_bar_button_font: normal normal 15px Tahoma, Geneva, sans-serif;
@nav_bar_button_decoration: none;
@nav_bar_button_shadow: none;
@nav_bar_button_background: #050505   fixed;
@nav_bar_button_hover_color: @nav_bar_button_color;
@nav_bar_button_hover_font: @nav_bar_button_font;
@nav_bar_button_hover_decoration: @nav_bar_button_decoration;
@nav_bar_button_hover_shadow: @nav_bar_button_shadow;
@nav_bar_button_hover_background: @nav_bar_button_background;
@nav_bar_button_current_color: #ffffff;
@nav_bar_button_current_font: @nav_bar_button_font;
@nav_bar_button_current_decoration: @nav_bar_button_decoration;
@nav_bar_button_current_shadow: @nav_bar_button_shadow;
@nav_bar_button_current_background: #790a79 center repeat-x scroll;
@nav_bar_bubble_text_color: #ffffff;
@nav_bar_bubble_font: .8em "Trebuchet MS", Verdana, Arial;
@nav_bar_bubble_background: #790a79;
@nav_bar_bubble_border_radius: 0;
#navigation-menu { padding: 0 0px; background: @nav_bar_background;  border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); }
#navigation-menu a { position: relative; }
#navigation-menu > ul, #navigation-menu > ul li { float: left; }
#navigation-menu > ul li a { display: inline-block; padding: 0 .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 80px !important; width: auto }
#navigation-menu > ul li:hover a { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 80px !important; width:auto }
#navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 80px !important; width: auto}
#navigation-menu div.tip-holder { position: absolute; top: 5px; right: -5px; display: inline-block; }
#navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: @nav_bar_bubble_background; .rounded-corners(@nav_bar_bubble_border_radius); font: @nav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, @shadow_color); height: .8em; color: @nav_bar_bubble_text_color; }
#navigation-menu div.tip-holder span.tip { border-top: 4px solid @nav_bar_bubble_background; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; left: 6px; }

Answer 1

Simply put a background image for the UL element.
Than put a solid background on the LI element. make it animate transparency on hover or on active state.

*{margin:0;padding:0;}

nav ul{
  list-style:none;
  background: url(http://lorempixel.com/output/food-q-c-640-480-9.jpg) 50% / cover;
  overflow:auto;
  display:table;
  width:100%;
}
nav ul li{
  display:table-cell;
}
nav ul li a {
  display:block;
  text-align:center;
  padding:2em 0;
  background: rgba(255,255,255, 0.9);
  transition: .3s;
}
nav ul li a:hover,
nav ul li a.active{
  background: rgba(255,255,255, 0.1);
  color: #fff;
}

  <nav>
  <ul>
    <li><a href="#" class="active">HOME</a></li>
    <li><a href="#">SANWDICHES</a></li>
    <li><a href="#">GROCERY</a></li>
    <li><a href="#">SHOP</a></li>
    <li><a href="#">SWEETS</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
  </nav>

Answer 2

Yes. This is possible using sprites. You can do this with CSS.

For example, lets say we had an image that was 100px × 100px, and we have our wrapper element 20px × 20px so we can show one fifth of the image at a time.

HTML:

<div class='wrapper'></div>

CSS:

.wrapper {
  width: 100px;
  height: 20px;
  background-image: url('my-image.png');
  background-repeat: no-repeat;
  /* Initially, the image will be completely hidden */
  background-position: 0 20px;
}

.wrapper.state1 {
  /* Show the top 20px of the image */
  background-position: 0 0;
}

.wrapper.state2 {
  /* Show the middle 20px of the image */
  background-position: 0 -40px;
}

jQuery:

This is just a demonstration of how you could swap the classes. But any way to change the parent element's class should suffice.

$(document).on('click', '.wrapper', function() {
  if ($(this).hasClass('state1')) {
    $(this).addClass('state2').removeClass('state1');
  else if ($(this).hasClass('state2')) {
    $(this).removeClass('state2');
  } else {
    $(this).addClass('state1');
  }
}