单击交互式图像映射时显示摘要详细信息

Question

得到这个交互式图像地图（不是 Google 地图）。想知道 1) 由于现在链接到另一个页面 (doRpMap.php)，此页面将显示与该可点击区域相关的所有事件的摘要详细信息。如何在用户单击该区域并显示该建筑物中发生的所有事件时根据数据库检查系统？

这些是我修改后的代码。请指教，谢谢。

<svg width="100%" viewBox="0 0 1600 2200">
                <image x="50" y="50" width="1500" height="2000" xlink:href="images/Campus-map.jpg" />
                <a xlink:href="doRpMap.php">
                    <image x="500" y="400" width="60" height="60" xlink:href="images/redTack.png" alt="Sports Complex" />
                    <image x="650" y="250" width="60" height="60" xlink:href="images/redTack.png" alt="Campus Heights Child Care Centre" />
                    <image x="800" y="200" width="60" height="60" xlink:href="images/redTack.png" alt="Republic Hospitality Centre (RHC)" />
                    <image x="970" y="400" width="60" height="60" xlink:href="images/redTack.png" alt="Adventure Learning Centre" />
                    <image x="300" y="500" width="60" height="60" xlink:href="images/redTack.png" alt="The ARCH" />
                    <image x="350" y="700" width="60" height="60" xlink:href="images/redTack.png" alt="Sports Hall" />
                    <image x="550" y="650" width="60" height="60" xlink:href="images/redTack.png" alt="Swimming Complex" />
                    <image x="170" y="800" width="60" height="60" xlink:href="images/redTack.png" alt="Basketball Court" />
                    <image x="780" y="820" width="60" height="60" xlink:href="images/redTack.png" alt="North Food Court" />
                    <image x="950" y="820" width="60" height="60" xlink:href="images/redTack.png" alt="E6" />
                    <image x="1150" y="980" width="60" height="60" xlink:href="images/redTack.png" alt="E5" />
                    <image x="1100" y="1050" width="60" height="60" xlink:href="images/redTack.png" alt="Agora Halls" />
                    <image x="950" y="1050" width="60" height="60" xlink:href="images/redTack.png" alt="Library" />
                    <image x="750" y="1100" width="60" height="60" xlink:href="images/redTack.png" alt="Lawn Food Court @ Level 3" />
                    <image x="760" y="1000" width="60" height="60" xlink:href="images/redTack.png" alt="W6" />
                    <image x="620" y="1100" width="60" height="60" xlink:href="images/redTack.png" alt="W5" />
                    <image x="600" y="1170" width="60" height="60" xlink:href="images/redTack.png" alt="ACEL Lab" />
                    <image x="770" y="1250" width="60" height="60" xlink:href="images/redTack.png" alt="W4" />
                    <image x="950" y="1170" width="60" height="60" xlink:href="images/redTack.png" alt="Reel Room Cafe" />
                    <image x="1120" y="1220" width="60" height="60" xlink:href="images/redTack.png" alt="E4" />
                    <image x="1120" y="1420" width="60" height="60" xlink:href="images/redTack.png" alt="E2" />
                    <image x="950" y="1300" width="60" height="60" xlink:href="images/redTack.png" alt="E3" />
                    <image x="600" y="1300" width="60" height="60" xlink:href="images/redTack.png" alt="W3" />
                    <image x="600" y="1500" width="60" height="60" xlink:href="images/redTack.png" alt="W2" />
                    <image x="950" y="1500" width="60" height="60" xlink:href="images/redTack.png" alt="E1" />
                    <image x="770" y="1650" width="60" height="60" xlink:href="images/redTack.png" alt="W1" />
                    <image x="950" y="1600" width="60" height="60" xlink:href="images/redTack.png" alt="South Food Court" />
                    <image x="1300" y="1700" width="60" height="60" xlink:href="images/redTack.png" alt="The Republic Cultural Centre (TRCC)" />
                    <image x="950" y="1750" width="60" height="60" xlink:href="images/redTack.png" alt="Republic Polytechnic Centre (RPC)" />
                    <image x="950" y="1970" width="60" height="60" xlink:href="images/redTack.png" alt="One-Stop Centre" />
                    <image x="800" y="1850" width="60" height="60" xlink:href="images/redTack.png" alt="Retail Shops" />
                </a>
                </svg>

Answer 1

HTML 在过去几年中为地图添加了大量功能。您可能想要探索一些关于 SVG、视框、视口和其他技术的教程。

大多数教程使用分区而不是表格。

最简单的做法是使外部分区position=relative，然后将绝对位置的内部元素设置为该分区。

类似于：see example

<div style="position: relative; width: 1000px; height: 500px;">
 <img src="[url to background image]" width="1000" height="500" alt="Map" >
 <img id="pt3" style="position: absolute; left: 657px; top:250px;" src="tack.png" >
</div>

属性"position: relative"表示块中的图像应该是相对于块的。然后你使用 position:absolute 来放置物品。措辞不直观。

viewbox 概念可能对您有所帮助。它使您可以独立于显示器设计地图。 Viewbox 可以轻松调整图形显示的大小。

在响应式设计中，您希望外部容器是一个与浏览器大小相关的视口。这样图像就可以扩展或收缩以填满屏幕。

如果你想认真对待地图，我会考虑 SVG。这样您就可以使用 SVG 绘制地图上显示的实际内容。

视图框的打开代码可能类似于：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

version="1.1" width="600" viewBox="-500,-250 500,250">

此框为 1000 像素 x 500 像素。中心点是 (0,0).

see example

我对 svg 地图的第一次尝试是在 http:arizonacolor.us 底部。我的相对定位映射尝试在 maps.protophoto.com

单击交互式图像映射时显示摘要详细信息

Displaying Summary Details upon clicking on interactive Image Maps

html

php

jquery

imagemap

netbeans-8