map with red dots
<p>I have a world map, containing red dots, 
when you hover over the dots,
a list of countries shows up ( it could be 1 or many)
all the items on the list are links going to a section on an inventory page.</p>

<p>I'm just learning jquery, so i'm facing a few issues, perhaps some one can help me with:</p>

<ol>
<li>I need the list of countries to auto resize according to height or     rows of countries there are</li>
<li>there should be only one list displaying at a time.</li>
<li>once i mouseover on a dot and it displays countries, and mouse out
it does not work again until i refresh the page</li>
<li>does my jquery code make sense, is there a better way?</li>
</ol>

<p>This is what most of the divs look like on the html section:</p>

<pre><code> &lt;div id="austDiv32"&gt;
 &lt;img class="dot5" src="../images/dot.png" alt="Austria" style="margin: 80px 0 0 450px;" /&gt;
 &lt;div id="Div32" class="theDiv" style="margin: 20px 0 0 460px;"&gt;
 &lt;a href="availability.aspx?region=Austria" class="style1"&gt;Austria/a&gt; 
 &lt;a href="availability.aspx?region=Czech_Republic-Hungary"class="style1"&gt;
 CzechRepublic&lt;br /&gt;Hungary&lt;/a&gt; 
 &lt;a href="availability.aspx?region=Serbia" class="style1"&gt;Serbia&lt;/a&gt;
 &lt;/div&gt;
 &lt;/div&gt; 
</code></pre>

<p>This is what the jquery looks like:</p>

<p></p>

<pre><code>    $(function () {

        $(".dot").mouseover(function () {
            $(this).parent().children("div").animate({ height: "130px" }, 1000).css("visibility", "visible").delay(3000);
        });

        $(".dot").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");
        })


        $(".dot2").mouseover(function () {
            $(this).parent().children("div").animate({ height: "18px" }, 1000).css("visibility", "visible").delay(1000);

        });

        $(".dot2").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });


        $(".dot3").mouseover(function () {
            $(this).parent().children("div").animate({ height: "30px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot3").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv").end();

        });

        $(".dot4").mouseover(function () {
            $(this).parent().children("div").animate({ height: "50px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot4").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });


        $(".dot5").mouseover(function () {
            $(this).parent().children("div").animate({ height: "70px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot5").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });

        $(".dot6").mouseover(function () {
            $(this).parent().children("div").animate({ height: "145px" }, 1000).css("visibility", "visible").delay(1000);
        })

        $(".dot6").mouseout(function () {
            $(this).parent().children("div").fadeOut(600).removeClass(".theDiv");

        });



    }); 

&lt;/script&gt;
</code></pre>
