jQuery show/hide - suis-je en train de penser à ça?

Question

Donc j'utilise le plugin jQuery Min Tools "Overlay", et je pense que j'ai pensé à tout ce processus ..

J'ai une carte-image (oui j'utilise toujours des cartes-images). avec ses coords pour 3 zones distinctes:

<map name="Map" id="Map"> 
    <area shape="poly" coords="7,13,146,14,147,68,116,68,117,123,4,124" href="#" rel="#know" /> 
    <area shape="rect" coords="118,70,290,227" href="#" rel="#facility" /> 
    <area shape="poly" coords="262,5,260,68,290,69,291,169,380,170,379,6" href="#" rel="#detect" /> 
    </map> 

Maintenant, lorsque la page charge initialement i ont un DIV qui affiche le contenu d'introduction:

<div id="mammogram-content"> 
    <div id="intro"> 
      <h2>header</h2> 
       <p>content here</p> 
    </div><!--end Intro --> 


</div><!--end mammogram-content--> 

Ainsi, lorsque le visiteur arrive sur la page ils voient que contenu d'introduction. puis ils peuvent cliquer sur les 3 zones sur la carte d'image, et quand ils cliquent sur le contenu d'introduction sera fadeOut et le nouveau contenu se fanent.

est le script ici, je suis maintenant en utilisant, ainsi que des outils de jqery min.js

<script type="text/javascript"> 
$(document).ready(function() { 
    $('area[rel]').overlay(); 

     $('area[rel]').click(function() { 
      $('#intro').fadeOut(500); 
     return false; 
     }); 


}); 
</script> 

l'intro disparaît bien, mais les 3 autres divs je ne peux pas obtenir à disparaître dans withouth les 3 d'entre eux la décoloration en même temps, que je ne veux ... je veux afficher chaque div individuellement dans le récipient comme ils cliquent sur eux ..:

vous pouvez voir un horrible attentat ici: https://www.bcidaho.com/mammography/

i aussi ne peut pas obtenir les 3 DIVS à s'asseoir à l'intérieur du conteneur correctement ...

puis-je simplifier cela en quelque sorte? ai-je vraiment besoin de jquery min tools pour afficher et masquer les divs dans un conteneur en utilisant [rel] et une image map ??

j'espère que j'ai transmis cela correctement, ma direction au moins.

Answer 1

Vous l'avez transmis correctement. Votre problème est que vous définissez la position, gauche et les attributs supérieurs sur les divs. Déposez-les et laissez-les reposer correctement dans le conteneur.

Vous n'avez pas besoin de jQuery Tools pour faire ce que vous faites, sauf si vous voulez faire le fondu en fondu. Vous pouvez facilement échanger le contenu d'un conteneur à un autre en utilisant jQuery ou Javascript standard - quelque chose d'aussi simple que cela:

$("#container").html($("#know").html()); 

Ensuite, placez le récipient dans votre « mammogramme-content » div et fixer le javascript ci-dessus pour la cliquez sur l'événement pour chacun de vos liens dans la carte d'image et vous seriez tous ensemble.