jquery asp.net hover box for multiple divs created in code behind into a literal control
<p>I'm trying to draw a map and I have a List of a village object. And I work out the view window of the map then loop through each co-ordinate checking to see if a village exists there from a database. If one does, I draw the village. What I really would like is to be able to to have a jquery hover menu when hovering over each village.</p>

<p>At the moment I have it so when you hover over a village, all the hover menus show for every village, because of course they all share the same image id and hover menu ids. But if I change them to be unique ids, how can I make the hover boxes for every village?</p>

<p>This is my code at the moment (I'm looping through and writing to a literal control)</p>

<p>Map.aspx.cs</p>

<pre><code>MapLiteral.Text = "";
    MapLiteral.Text += "&lt;table cellpadding=\"0\" cellspacing=\"0\"&gt;";

    for (int i = minx; i &lt;= maxx; i++)
    {
        MapLiteral.Text += "&lt;tr&gt;";
        for (int j = miny; j &lt;= maxy; j++)
        {
            MapLiteral.Text += "&lt;td width\"50px\" height=\"50px\" style=\"border: solid 1px #2d5c25;\"&gt;";
            if (Objects.Village.VillageExists(i, j))
            {
                Objects.Village village = new Objects.Village();
                village = Objects.Village.GetVillage(i, j);
                MapLiteral.Text += "&lt;div class=\"village\"&gt;&lt;img src=\"/Images/Map/Village1.gif\" /&gt;&lt;/div&gt;";
                MapLiteral.Text += "&lt;div class=\"villagehover\" id=\"villagehover\"&gt;test&lt;/div&gt;";
            }
            else
            {
                MapLiteral.Text += "&lt;img src=\"/Images/Map/Grass.gif\" /&gt;";
            }
            MapLiteral.Text += "&lt;/td&gt;";
        }
        MapLiteral.Text += "&lt;/tr&gt;";
    }

    MapLiteral.Text += "&lt;/table&gt;";
</code></pre>

<p>Map.aspx</p>

<pre><code>&lt;script type="text/javascript" src="Scripts/jquery-1.4.1.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function () {

        $(".villagehover").hide()
        $(".village").hover(
  function () {
      $('.villagehover').stop().fadeTo("slow", 0.33);
  },
  function () {
      $('.villagehover').stop().fadeOut("slow");
  }
);

    });
&lt;/script&gt;
&lt;/asp:Content&gt;
&lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server"&gt;
&lt;center&gt;
    &lt;h2&gt;
        Map (&lt;asp:Label ID="XTitleLabel" runat="server" /&gt;,
        &lt;asp:Label ID="YTitleLabel" runat="server" /&gt;)
    &lt;/h2&gt;
     &lt;asp:Literal ID="MapLiteral" runat="server"&gt;&lt;/asp:Literal&gt;
</code></pre>

<p>Any help would be greatly appreciated!</p>
