javascript - 特定图像没有响应

问题描述

欧洲地图反应灵敏，并保持在应有的位置。但是大头针只是停留在屏幕中间。
我该如何解决？
我在下面添加了代码。
<html>
<head>

<div>
<style type="text/css">
    
    .img-responsive { display: block; max-width: 100%; height: auto; width: 150px; }
    .TEST4
    {
        position: relative;
        top: 0;
        left: 0;
    }
    .Ping1
    {
        position: absolute;
        top: 525px;
        left: 1025px;
    }
    .Ping2
    {
        position: absolute;
        top: 480px;
        left: 1020px;
    }
    .Ping3
    {
        position: absolute;
        top: 465px;
        left: 965px;
    }
    .Ping4
    {
        position: absolute;
        top: 420px;
        left: 920px;
    }
    .Ping5
    {
        position: absolute;
        top: 380px;
        left: 825px;
    }
    .Ping6
    {
        position: absolute;
        top: 405px;
        left: 815px;
    }
    .Ping7
    {
        position: absolute;
        top:455px; 
        left:920px;
    }
    .Ping8
    {
        position: absolute;
        top: 395px;
        left: 875px;
    }
    .Ping9
    {
        position: absolute;
        top: 370px;
        left: 750px;
    }
    .Ping10
    {
        position: absolute;
        top: 165px;
        left: 1030px;
    }
    .Ping11 
    {
        position: absolute;
        top:380px; 
        left:960px;
    }
    .Ping12
    {
        position: absolute;
        top:435px; 
        left:960px;
    }
    .Ping13
    {
        position: absolute;
        top:470px; 
        left:790px;
    }
    .Ping14
    {
        position: absolute;
        top:490px; 
        left:875px;
    }
    .Ping15
    {
        position: absolute;
        top:560px; 
        left:685px;
    }
    .Ping16
    {
        position: absolute;
        top:555px; 
        left:735px;
    }

</style>
</div>
    <title>Ewals Locations</title>
</head>

<body>


</center>

</div>

<div style="background-color: white;">
<div>
    <center>
    <a href="http://i-web.ewals.com/" target="_blank"><img src="Ewals_Cargo_Care.png" alt="Ewals Group Logo"></a><nav class="main-header_logo col-1-1">
    </center> 

<style type="text/css"></style>

<center><h1 style="font-family:Bahnschrift;font-size:35px;font-style:normal;padding-bottom:20px"><b>Ewals Locations</b></h1>

<center>
<div style="position: relative; left: 0; top: 0;">
    
<style type="text/css">
    div.relative{
    position: relative;
    left: 30px
    border: 3px solid #73ad21;
}
</style>
<img src="TEST4.png" alt="TEST4" usemap="#TEST4">

<style>

*{margin: 0; padding: 0;}
body {font-family: Arial;}

</style>

    <map name="TEST4">

<style type="text/css">
.text-responsive { display: block; max-width: 100%; height: auto; width: 150px; }</style>
    <!-- Austria. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Austria.html"><img src="pinggood.png" class="Ping7"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Czechia. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Czech%20Republic.html"><img src="pinggood.png" class="Ping4"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Germany. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Germany.html"><img src="pinggood.png" class="Ping8"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- The Netherlands. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Netherlands.html"><img src="pinggood.png" class="Ping5"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Romania. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Romania.html"><img src="pinggood.png" class="Ping2"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- United Kingdom. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/United%20Kingdom.html"><img src="pinggood.png" class="Ping9"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Belgium. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Belgium.html"><img src="pinggood.png" class="Ping6"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Finland. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Finland.html"><img src="pinggood.png" class="Ping10"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Hungary. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Hungary.html"><img src="pinggood.png" class="Ping3"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Poland. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Poland.html"><img src="pinggood.png" class="Ping11"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Slovakia. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Slovakia.html"><img src="pinggood.png" class="Ping12"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Bulgaria. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Bulgaria.html"><img src="pinggood.png" class="Ping1"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- France. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/France.html"><img src="pinggood.png" class="Ping13"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Italy. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Italy.html"><img src="pinggood.png" class="Ping14"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Portugal. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Portugal.html"><img src="pinggood.png" class="Ping15"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

    <!-- Spain. -->
    <a href="file:///C:/Users/Myname/Documents/Site2/Spain.html"><img src="pinggood.png" class="Ping16"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' "></a>

</div>
</body>
</html>
标签： javascriptjavahtmlcss
javascript - 特定图像没有响应

问题描述

解决方案

推荐阅读
