时间戳

首页 > 解决方案 > 图像卡在一个位置

javascript - 图像卡在一个位置

问题描述

首先让我说我对 HTML 和 CSS 很陌生。

我正在为我工​​作的公司创建一个网站，该网站将包含该公司所有位置的所有信息。

我将以荷兰为例。

我为每个国家添加了一张地图，显示所有带有“pings”的位置。

如您所见，“ping”是它们应该在的位置，但是当我调整窗口大小或将窗口拖到另一个小于 1920x1080 的屏幕时，就会发生这种情况

我真的不知道如何解决这个问题

我在下面添加了我的代码

<!DOCTYPE html>
<html>
<head>
    <title>The Netherlands Locations</title>
</head>
<body>

<center><h1 style="font-family:Calibri;font-size:30;font-style:normal;text-decoration: none;"><a href="file:///C:/Users/MTA/Documents/Site2/SiteEwalsLocations2.html" style="color: #000000"><b>HOME</b></h1></a>

<style type="text/css">
    
    }
    .responsive 
    {
         max-width: 20px;
         height: auto;
    }
    .Netherlands3
    {
        position: relative;
        top: 0;
        left: 0;
    }
    .Ping1
    {
        position: absolute;
        top: 610px;
        left: 1075px;
    }
    .Ping2
    {
        position: absolute;
        top: 590px;
        left: 1060px;
    }
    .Ping3
    {
        position: absolute;
        top:385px;
        left:1194px;
    }
    .Ping4
    {
        position: absolute;
        top:400px;
        left:840px;
    }
</style>

<img src="Netherlands3.png" alt="Netherlands" height="730" width="700" usemap="#Netherlands3"></a>

<map name="Netherlands3">

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

    <!-- Tegelen. -->
    <a href="https://www.google.com/maps/place/Ari%C3%ABnsstraat+61,+5931+HM+Tegelen/@51.3507443,6.1482531,17z/data=!3m1!4b1!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47c750011bdd6129:0x13a1103e35402205!8m2!3d51.3507443!4d6.1504418" target="_blank"><img src="pinggood.png" class="Ping1"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".responsive"></a>

    <!-- Maasbree. -->
    <a href="https://www.google.com/maps/place/Olivier+van+Noortweg+7,+5928+LX+Maasbree/@51.3428879,6.1045779,12z/data=!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47c745c94041f7f5:0x901eaac368a5573b!8m2!3d51.3921233!4d6.0645604" target="_blank"><img src="pinggood.png" class="Ping2"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".sticky"></a>

    <!-- Oldenzaal. -->
    <a href="https://www.google.com/maps/place/Ewals+Cargo+Care+B.V./@52.2932725,6.9211237,17z/data=!3m1!4b1!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47b816dfb82cd1c3:0x8853cf9983c82627!8m2!3d52.2932725!4d6.9233124" target="_blank"><img src="pinggood.png" class="Ping3"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".img-responsive"></a>

    <!-- Rozenburg. -->
    <a href="https://www.google.com/maps/place/Ewals+Cargo+Care+B.V./@52.2731607,4.7347315,17z/data=!3m1!4b1!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47c5e7f7130ab605:0x2820e78f4b3fffe9!8m2!3d52.2731607!4d4.7369202" target="_blank"><img src="pinggood.png" class="Ping4"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".img-responsive"></a>


<style type="text/css">
    
    <EWALS CARGO CARE>
    
    {}
    .InformatieTegelen
    {
        position: absolute;
        top: 800px;
        left: 600px;
    }
    .InformatieMaasbree
    {
        position: absolute;
        top: 800px;
        left: 800px;
    }
    .InformatieOldenzaal
    {
        position: absolute;
        top: 800px;
        left: 1000px;
    }
    .InformatieRozenburg
    {
        position: absolute;
        top: 800px;
        left: 1200px;
    }
</style>

<p style="font-family:Arial;font-size:15px;font-style:normal;"><a href="file:///C:/Users/MTA/Documents/Site2/NED/InfoTEG.html" style="color: black" class="InformatieTegelen">Informatie Tegelen</a></p>
<p style="font-family:Arial;font-size:15px;font-style:normal;"><a href="file:///C:/Users/MTA/Documents/Site2/NED/InfoMAA.html" style="color: black" class="InformatieMaasbree">Informatie Maasbree</a></p>
<p style="font-family:Arial;font-size:15px;font-style:normal;"><a href="file:///C:/Users/MTA/Documents/Site2/NED/InfoODZ.html" style="color: black" class="InformatieOldenzaal">Informatie Oldenzaal</a></p>
<p style="font-family:Arial;font-size:15px;font-style:normal;"><a href="file:///C:/Users/MTA/Documents/Site2/NED/InfoROZ.html" style="color: black" class="InformatieRozenburg">Informatie Rozenburg</a></p>

</body>
</html>

标签： javascripthtmlcss

解决方案

我所做的是将您的所有内容包装在一个 div 中。（类 mapBg，您可以选择更好的名称）该 div 具有我们希望地图的大小，地图 img 的宽度为 100%，高度为 100%。那么 ping 可以是绝对位置，顶部和左侧将引用包装 div 的限制。这是一个例子。HTML


<div class="mapBg">

<img src="Netherlands.png" alt="Netherlands" style="height:100%; width:100%" usemap="#Netherlands3"></a>

<map name="Netherlands3">

    <!-- Tegelen. -->
    <a href="https://www.google.com/maps/place/Ari%C3%ABnsstraat+61,+5931+HM+Tegelen/@51.3507443,6.1482531,17z/data=!3m1!4b1!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47c750011bdd6129:0x13a1103e35402205!8m2!3d51.3507443!4d6.1504418" target="_blank"><img src="pinggood.png" class="Ping1"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".responsive"></a>

    <!-- Maasbree. -->
    <a href="https://www.google.com/maps/place/Olivier+van+Noortweg+7,+5928+LX+Maasbree/@51.3428879,6.1045779,12z/data=!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47c745c94041f7f5:0x901eaac368a5573b!8m2!3d51.3921233!4d6.0645604" target="_blank"><img src="pinggood.png" class="Ping2"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".sticky"></a>

    <!-- Oldenzaal. -->
    <a href="https://www.google.com/maps/place/Ewals+Cargo+Care+B.V./@52.2932725,6.9211237,17z/data=!3m1!4b1!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47b816dfb82cd1c3:0x8853cf9983c82627!8m2!3d52.2932725!4d6.9233124" target="_blank"><img src="pinggood.png" class="Ping3"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".img-responsive"></a>

    <!-- Rozenburg. -->
    <a href="https://www.google.com/maps/place/Ewals+Cargo+Care+B.V./@52.2731607,4.7347315,17z/data=!3m1!4b1!4m9!1m3!11m2!2sL57brsHAatVbQdnqSsRwtDw-ymHUUQ!3e3!3m4!1s0x47c5e7f7130ab605:0x2820e78f4b3fffe9!8m2!3d52.2731607!4d4.7369202" target="_blank"><img src="pinggood.png" class="Ping4"/ height="30" width="20" onmouseover="this.src='pinggood2.png'" onmouseout="this.src= 'pinggood.png' " class=".img-responsive"></a>

</div>

CSS：

.mapBg{
  position: relative;
  width: 730px;
  height: 700px;
}
.Ping1{
  position: absolute;
  top: 50px;
  left: 60px;
}
.Ping2{
  position: absolute;
  top: 80px;
  left: 160px;
}
.Ping3{
  position: absolute;
  top: 50px;
  left: 500px;
}

代码笔示例

推荐阅读