Here follows the web service code and html code (+Javascript / JQuery) to make the necessary calls.
Please note the [System.Web.Script.Services.ScriptService] code that needs to be added to the default webservice class.

save the following as: GetTimeWebService.cs (in the "app_code" folder) :

using
System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class GetTimeWebService : System.Web.Services.WebService {

    public GetTimeWebService () {    }


    [WebMethod]

   public string checkit()

   {

        return "Hello World: " + DateTime.Now.ToLongTimeString();

    }

}

 

 

and this is the HTML page .. name whatever you want to:

<div>the time is: <span id="time_container"></span></div>

<script> //if you create the webservice in the same file then use ... url: "

<%=HttpContext.Current.Request.Url.LocalPath%>/GetTime", function UpdateTime()
{
$.ajax({
type: "POST",
url: "GetTimeWebService.asmx/checkit",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg)
{ $('#time_container').text(msg.d); } ,
error: function()
{ $('#time_container').text('lost connection'); }
}
);}
UpdateTime(); setInterval(UpdateTime,1000);
</script>

<span id="<%=ClientID %>_spanner" onmouseout="toggleDiv('<%=PopupId %>');" onmouseover="toggleDiv('<%=PopupId %>');">

    <div id="<%=PopupId %>" style="border: 1px black solid; background-color: white;

        display: none; width: 200px; heigth: 300px; z-index: 1; position: absolute;">

        Doctor:

        <%=Name %><br />

        Hospital: St Thommas

        <br />

        Phone: 092312 2133<br />

        Fax:

        <br />

        Email: ASDF@test.com<br />

    </div>

    <a href="#" >

        <img src="/Images/doctor.png" style="position: relative; top: 5px; height: 20px;

            width: 20px; border: none" />

        <%=Name %></a> </span>



        <script>
            var item = $('#' + '<%=PopupId %>');
            var wholeitem = $('#<%=ClientID %>_spanner')
            var POS = wholeitem.position();
            item.html("left: " + POS.left + ", top: " + POS.top);
            item.css('left', POS.left);
            item.css('top', POS.top);
        </script>

use eg. with mouseover or mouseout:

function doSomething(e) {
	if (!e) var e = window.event;
	var relTarg = e.relatedTarget || e.fromElement;
}