Question

I am trying when user clicks on one of the images seen here

http://techavid.com/design/test.html

That the image in background is only thing focused. All icons are greyed out until user clicks and when they do the colored version of the icon is only showing. Currently the color image of each icon appears behind the greyed out version when mouseover not active.

Can this be done?

thank you,
paul

Answer 1

Please post the code that applies to this problem. That way the people here can respond faster and better without having to dig through your site to find out what’s relevant.

Anyway, here’s a simple alternative to what you’re trying to do:

HTML

<div id="navigation">
  <a id="foo" href="#">&nbsp;</a>
  <a id="bar" href="#">&nbsp;</a>
  <a id="baz" href="#">&nbsp;</a>
</div>

CSS

a#foo {
  background: url('foo-inactive.png') no-repeat;
}

a#foo:hover,
a#foo.active {
  background: url('foo-active.png') no-repeat;
}

This gives you the hover effect. Do the same for other id’s. Add some padding so that the link is wide enough to display the image in the background. Or use display="block" and width/height attributes.

Now when someone clicks the image, give it the active class that does, looking at the CSS, the same thing as the :hover effect. If clicking the image brings you to another page, simply add it in the HTML (<a id="foo" class="active"...), if you stay on the same page, do something like this:

jQuery

$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});