jQuery show / hide - am i over thinking this?

Question

So i am using the jQuery Min Tools "Overlay" plugin, and im thinking that i over thought this entire process..

I have an image map (yes i still use image maps). with its coords for 3 separate areas:

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

Now, when the page initially loads i have a DIV that displays the introduction content:

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


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

So when the visitor comes to the page they see that introduction content. then they can click on the 3 areas on the image map, and when they click the introduction content will fadeOut and the new content will fadeIn.

here is the script i am using now, along with jqery tools min.js

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

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


});
</script>

the intro fades out fine, but the 3 other divs i cant get to fade in withouth all 3 of them fading it at the same time, which i dont want...i want to display each div individually in the container as they click on them..:

you can see a horrible attempt here: https://www.bcidaho.com/mammography/

i also can not get the 3 DIVS to sit inside the container properly...

can i simplify this somehow? do i really need jquery min tools to show and hide divs inside a container using [rel] and an image map??

hopefully i conveyed this properly, my direction at least.

Answer 1

You did convey it correctly. Your problem is that you're setting the position, left and top attributes on the divs.

Drop those, and it'll sit inside the container correctly.

You don't need jQuery Tools to do what you're doing unless you want to do the fade in fade out. You could easily swap out the content from one container for another using standard jQuery or Javascript - something as simple as this:

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

Then put the container in your "mammogram-content" div and attach the above javascript to the click event for each of your links in the image map and you'd be all set.