Question

我正在使用Visual Studio 2015开发我的网站。我正在使用设置了多个目标的ImageMap。在调试模式（使用Edge作为浏览器）下，所有热点均正确排列。我可以随意更改窗口的大小，这也会缩小或扩展图像映射，并且热点会停留在其目标上方。当我更新网站时，发现在三台不同的计算机上使用Edge或Chrome访问该页面时，会显示出热点在原本应该位于的位置左右偏斜。您所走影像图的距离越远，热点的偏移量就越大。有什么建议吗？

        <h2>Select a Subdivision to Start Your Search</h2>
        <div class="mainMap" tabindex="2"> 

            <map id="FPMap0" name="FPMap0">
            <area coords="49,76,129,102"   
href="http://mlx.io/bc9" shape="rect" title="Anthem" alt="Currently 
Available">
            <area coords="130,144,239,171" 
href="http://mlx.io/bcv" shape="rect" title="Desert Hills" alt="Currently 
Available">
            <area coords="52,214,147,241"  
href="http://mlx.io/bcx" shape="rect" title="Tramonto" alt="Currently 
Available">
            <area coords="68,283,231,311"  
href="http://mlx.io/bcy" shape="rect" title="Sonoran Foothills" 
alt="Currently Available">
            <area coords="86,419,249,442"  
href="http://mlx.io/bcz" shape="rect" title="Dynamite Mountain" 
alt="Currently Available">
            <area coords="357,126,497,148" 
href="http://mlx.io/bd0" shape="rect" title="Rancho Manana" alt="Currently 
Available">
            <area coords="497,141,639,163" 
href="http://mlx.io/bdh" shape="rect" title="Desert Mountain" 
alt="Currently Available">
            <area coords="554,164,635,190" 
href="http://mlx.io/bdi" shape="rect" title="Mirabel" alt="Currently 
Available">
            <area coords="398,201,527,225" 
href="http://mlx.io/bdk" shape="rect" title="Sentinel Rock" alt="Currently 
Available">
            <area coords="392,224,551,244" 
href="http://mlx.io/bdo" shape="rect" title="Lost Acres Estates" 
alt="Currently Available">
            <area coords="450,245,570,262" href="http://mlx.io/bdp" 
   shape="rect" title="The Boulders" alt="Currently Available">
            <area coords="328,265,488,290" 
href="http://mlx.io/bc5" shape="rect" title="Dove Valley Ranch" 
alt="Currently Available">
            <area coords="524,259,639,284" 
href="http://mlx.io/bdq" shape="rect" title="Legend Trail" alt="Currently 
Available">
            <area coords="478,304,564,325" 
href="http://mlx.io/bdr" shape="rect" title="Winfield" alt="Currently 
Available">
            <area coords="351,347,472,374" 
href="http://mlx.io/bc7" shape="rect" title="Tatum Ranch" alt="Currently 
Available">
            <area coords="521,378,633,404" 
href="http://mlx.io/dga" shape="rect" title="Troon North" alt="Currently 
Available">
            <area coords="563,434,632,459" 
href="http://mlx.io/bds" shape="rect" title="Troon" alt="Currently 
Available">
            <area coords="521,459,623,499" 
href="http://mlx.io/bdt" shape="rect" title="Desert Highlands" 
alt="Currently Available">
            <area coords="523,517,603,559" 
href="http://mlx.io/bdu" shape="rect" title="DC Ranch" alt="Currently 
Available">
            <area coords="338,549,410,573" 
href="http://mlx.io/bdv" shape="rect" title="Aviano" alt="Currently 
Available">
            <area coords="365,581,485,603" 
href="http://mlx.io/bdw" shape="rect" title="Desert Ridge" alt="Currently 
Available">
            <area coords="320,602,404,623" 
href="http://mlx.io/bdx" shape="rect" title="Fireside" alt="Currently 
Available">
            <area coords="477,605,567,629" 
href="http://mlx.io/bdy" shape="rect" title="Grayhawk" alt="Currently 
Available">
            <area coords="568,589,639,632" 
href="http://mlx.io/bdz" shape="rect" title="Windgate" alt="Currently 
Available">
            </map> 

            <img style="border:solid" id="my_image" 
src="images/AreaMap4.jpg" width="640" height="640" alt="North East Valley" 
usemap="#FPMap0">
        </div>

在Visual Studio调试模式下，热点可以正常工作。在线时，浏览器会抵消热点

0 个答案: