Having just started with asp.net and javascript, I have a task to complete in a short time. I feel overwhelmed by all the basics I need to learn before starting. Could anyone point me in the right direction? Thank you in advance!
I need to display several cities on a country map, each with its own unique style defined in a 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, with different city name and tel --%>
</ul>
</div>
</div>
</div>
Eventually, I want to be able to create these city items dynamically.
A hint box should appear when hovering over each city. How can these hint boxes be created dynamically and populated with the correct information for each city? I may need to dynamically generate the list of cities as well.
<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>
Below is the JavaScript code for handling mouseover and mouseout events for each city:
How can I ensure that the function retrieves the correct agentVisit?
<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>
If anyone could provide guidance or resources on how to approach this task, I would greatly appreciate it. Thank you!