Question

我有一个包含多个区域的HTML图像地图，我想为区域设置背景颜色，以便知道它们存在于那里。常规CSS似乎不起作用。我使用ImageMapster jQuery插件，但只有当你将鼠标悬停在它们上面时才填充该区域。

HTML

<?php
include "include/db.php";
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-16"/>
    <title>Legende din județul Hunedoara</title>
    <link href="include/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1 id="titlu">Legende din județul Hunedoara</h1>
<div class="harta_interactiva">
    <img id="harta" src="imagini/hunedoara.png" usemap="#local"/>
    <map name="local" id="localitati">
        <?php
            $rezultat = $con->query("SELECT * FROM localitati");
            while($rand = $rezultat->fetch_assoc())
            {
                ?><area name="<?=$rand['nume']?>" alt="" shape="circle" href="#" coords="<?=$rand['coord']?>" /><?php
            }
            $con->close();
        ?>

    </map>
</div>
<script type="text/javascript" src="include/jquery-3.1.1.js"></script>
<script type="text/javascript" src="include/jquery.imagemapster.js"></script>
<script type="text/javascript" src="include/script.js"></script>
</body>
</html>

JS

var image = $('#harta');
$.get( "lista_legende.php", function( data ) {
    image.mapster(
        {
            fillColor: "000000",
            fillOpacity: "100",
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            showToolTip: true,
            toolTipClose: 'tooltip-click',
            areas : data
        });
}, "json" );

CSS

html
{
    'background-color: #b3dced;
    'background: -moz-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
    'background: -webkit-gradient(left top, right top, color-stop(0%, #b3dced), color-stop(50%, #29b8e5), color-stop(100%, #bce0ee));
    'background: -webkit-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
    'background: -o-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
   ' background: -ms-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
    'background: linear-gradient(to right, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);


}
body
{
    witdh: 100%;
    background-color: #7bdcfa;
}
.harta_interactiva
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    display:block;
    width:500px;
    text-align: center;

}
h1,h2
{
    display:block;
    text-align: center;
    margin-top:20px;
}
.login
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width:220px;
}
.login th,td
{
    border: 1px solid black;
    border-collapse: collapse;
}
.continut
{
    display:block;
    width:1050px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}
.continut th,td
{
    border: 1px solid black;
    border-collapse: collapse;
}
td input[type="text"]
{
    width: 90%;
}
#mesaj
{
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align:center;

}
.zona_text
{
    margin:100px;

}
area
{
    display:block;
    background-color: black;
}
a
{
    text-decoration: none;
}

设置HTML区域标记填充颜色

0 个答案: