getOccCount.php

<?php
$query = "SELECT COUNT(occurrence_id) FROM major_occurrence GROUP BY location_id";
$result = mysqli_query($link, $query) or die(mysqli_error($link));
$array = mysql_fetch_row($result);                          //fetch result    
echo json_encode($array);
?>

当鼠标悬停在imagemap上的其他位置时，悬停应该会更改结果，因为它具有不同的位置ID。

<style type="text/css">
    #map {
        margin: 0;
        padding: 0;
        width: 950px;
        height: 1211px;
        background: url(images/Campus-Map.jpg);
        background-size: 950px 1211px;
        font-family: arial, helvetica, sans-serif;
        font-size: 8pt;
    }

    #map li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #map li a {
        position: absolute;
        display: block;
        /*
       Specifying a background image
       (a 1px by 1px transparent gif)
       fixes a bug in older versions of
       IE that causeses the block to not
       render at its full dimensions.
    */
        background: url(blank.gif);
        text-decoration: none;
        color: #000;
    }

    #map li a span {
        display: none;
    }

    #map li a:hover span {
        position: relative;
        display: block;
        width: 200px;
        left: 20px;
        top: 20px;
        border: 1px solid #000;
        background: #fff;
        padding: 5px;
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    #map a.rpc {
        top: 1060px;
        left: 585px;
        width: 78px;
        height: 65px;
    }
</style>
<script language="javascript" type="text/javascript">
            $('#map>span').hover(function () {
                $.ajax({
                    url: 'getOccCount.php',
                    data: "",
                    dataType: 'json',
                    method: GET,
                    success: function (data) {
                        var location_id = $(this).attr("location_id");
                        $.get("getOccCount.php", {location_id: location_id}, function (result) {
                            var result = data[0];
                            $('#map>span').html('Total Number of Occurrence: ' + result);
                        }
                    }
                });
            });
        </script>
<body>
    <html>
<ul id="map">
    <li><a class="rpc" href="doRPMap.php?locID=1"><span><b>RPC</b></span></a></li>
<ul> 
</body>
</html>

经过必要的修改后，它仍然不适合我。请就此事给我一些建议。谢谢。

Answer 1

如果您向我们提供了更多代码，例如实际绘制地图的html（我只看到一个链接，但实际上没有id = map在网页上打印），以及javascript本身。但无论如何我会试着回答你的问题：

由于您使用jquery标记发布此内容，我假设您已加载这些库。基本上，你想要做的是在执行hover（）函数时执行$ .get或$ .post AJAX请求，然后对该请求的结果执行某些操作。

首先，您必须在每个“地图标记”上提供loc_id，以将其提交到将处理您的请求的页面。以下是一个示例，您悬停在其上的图片具有class="image"和唯一的loc_id="x"属性：

$('.image').mouseenter(function(){ 
    var loc_id = $(this).attr("loc_id");
    $.get("get_occurence_count.php", {loc_id: loc_id}, function(result) {
        //Handle result here.
    });
});

此代码段的作用是：它将loc_id从悬停在.image上的result发送到名为get_occurence_count.php的PHP页面。这个PHP页面必须有一个小脚本打开数据库连接，并获得你在问题中提到的COUNT，然后ECHO这个数字。这个在PHP页面上回显的数字将作为变量result返回到javascript。在上面的“我在此处理结果”部分中使用此<form name="LPform" novalidate> <div class="form-row clearfix"> <label class="lbl-fld" style="margin-left: 12%;width:20%;">Email ID</label> <input class="mob-adj-inpbx " type="email" name="uemail" ng-model="useremail" placeholder=" me@example.com" ng-required="true"/> <div class="valid-chk validation-loginpopup" ng-show="LPform.uemail.$dirty && allow_Invalid"> <i style="font-size: 1.15em;padding:0px;" ng-class="{'false':'icon-close', 'true': 'icon-correct'}[LPform.uemail.$valid]" class="icon-correct"></i> </div> <div class="error-prompt" ng-show="LPform.uemail.$dirty && allow_Invalid"> </div> </div> <div class="form-row clearfix"> <label class="lbl-fld" style="margin-left: 12%;width:20%;">PASSWORD</label> <input class="mob-adj-inpbx" type="password" name="upassword" ng-model="userpassword" placeholder=" password" ng-required="true"/> <div class="valid-chk validation-loginpopup" ng-show="LPform.upassword.$dirty && allow_Invalid"> <i style="font-size: 1.15em;padding:0px;" ng-class="{'false':'icon-close', 'true': 'icon-correct'}[LPform.upassword.$valid]" class="icon-correct"></i> </div> <div class="error-prompt" ng-show="LPform.upassword.$dirty && allow_Invalid"> </div> </div> <div id="server_message" class="form-row clearfix basic-error-msg-loginpopup" ng-show="server_message"> {{server_message}} </div> <div class="btn-container clearfix mobile-adj" style="margin-left:17.2%;"> <div class="btn-wrap btn-loginpopup"> <input style="max-height:40px;width:121%;" type="submit" name="commit" value="LOGIN" ng-click="login_request()"/> </div> </div> </form>。

例如：你可以把结果放在悬停div（或者你正在使用的任何东西）中，通过这样做：$（'。hover'）。html（'这个位置的计数是：'+结果）;

希望这有帮助！

编辑：根据以下建议将hover（）更改为mouseenter（）。 Edit2：添加了关于如何将结果附加到悬停的部分。

使用hover（）检索数据库数据

getOccCount.php

1 个答案:

使用hover（）检索数据库数据

getOc​​cCount.php

1 个答案:

getOccCount.php