CSS/onglets Jquery avec différentes images

Question

Je suis en train lorsque l'utilisateur clique sur l'une des images affichées ici

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

que l'image en arrière-plan est axé seule chose. Toutes les icônes sont grisées jusqu'à ce que l'utilisateur clique et, lorsqu'elles le font, la version en couleur de l'icône s'affiche uniquement. Actuellement, l'image couleur de chaque icône apparaît derrière la version grisée lorsque le survol de la souris n'est pas actif.

Est-ce que cela peut être fait?

merci, paul

Answer 1

S'il vous plaît afficher le code qui s'applique à ce problème. De cette façon, les gens ici peuvent répondre plus rapidement et mieux sans avoir à fouiller sur votre site pour savoir ce qui est pertinent.

Quoi qu'il en soit, voici une alternative simple à ce que vous essayez de faire:

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

Cela vous donne l'effet de vol stationnaire. Faites de même pour les autres identifiants. Ajoutez un peu de remplissage pour que le lien soit suffisamment large pour afficher l'image en arrière-plan. Ou utilisez les attributs display="block" et width/height. Maintenant, quand quelqu'un clique sur l'image, donnez-lui la classe active qui fait, en regardant le CSS, la même chose que l'effet :hover. Si en cliquant sur l'image que vous amène à une autre page, il suffit d'ajouter dans le code HTML (<a id="foo" class="active"...), si vous restez sur la même page, faire quelque chose comme ceci:

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

});