tags:

views:

81

answers:

1

Hi

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

A: 

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;
  });

});
Alec
Alec thank you. I tried to upvote your answer but i need 15 points reputation. Definitely will come back and give you props when I reach 15 points.I implemented your suggestion as seen herehttp://techavid.com/design/test3.htmlI am trying to have the icons when clicked stay active without going to another page. Everything seems to work except icons staying active when clicked. Maybe I missed something?thanks again :)
Paul
Alec i figured it out. Thank you - much appreciated!Paul
Paul
Looking good :)
Alec
Paul
If you load the page and know that "bar" should be active, add the active class to that element when outputting the HTML: `<a id="bar" class="active" href="#"> </a>`. As soon as you click something other than "bar", jQuery will remove the class "active", and the grey background will be used again. For the border, try `outline: none;` in the CSS.
Alec
Thanks Alec worked like a charm :)
Paul
Paul