asp.net - How to tell a javascript function what element to manipulate? -

i new asp.net , javascript, , supposed following task in couple of days. know have learn basics, before asking, don't know need in short time. lot in advance!

here's number cities, shown on country map: each city has it's own style (since city positions different), defined in css.

<div class="node">     <div class="taxonomy">     </div>     <div class="content">         <div id="contact_map" runat="server">             <ul>                 <li id="city1" onmouseover= "onmouseoveragent(this)"                                   onmouseout="onmouseoutagent(this)">                     <a href="someaddress"><span class="hideme">some city name</span>                     </a>                     <p class="hideme">some city name<strong class="tel">0123456789</strong>                     </p>                 </li>                 <%-- other cities here, different city name , tel --%>             </ul>         </div>     </div> </div> 

i try figure out how create these city items dynamically later.

below hint box, shown when mouse on city. has repeated cities. (question1: how can create these hint boxes dynamically, , somehow fill them information associated right city? maybe have create previous list dynamically, too..)

<div id="agentvisit" class="floating-tip-wrapper" style="margin: 0px; padding: 0px; position:         absolute; display:none; opacity: 1;">     <div class="floating-tip" style="margin: 0px;">some city name         <strong class="tel">0123456789</strong>     </div> </div> 

and tha javascript code onmouseover , onmouseout of each city: (question 2: how can tell function agentvisit get? )

<script language="javascript" type="text/javascript">      function onmouseoveragent(e) {         var hint = document.getelementbyid("agentvisit");         console.log(hint);         hint.style.display = 'block';         hint.style.top = math.max(e.offsettop - hint.offsetheight, 0) + "px";         hint.style.left = e.offsetleft + "px";     };      function onmouseoutagent(e) {         var hint = document.getelementbyid("agentvisit");         hint.style.display = 'none';     }  </script> 

i appreciate if provide idea (or general hint) of how it. or link quick tutorial. thanks!

i think making way more complicated has be, because can leverage data dash (data-) attributes of dom elements , use jqueryui tooltip.