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

Question

Got this interactive image map (Not Google Maps). Wished to know 1) Since now it's linking to another page (doRpMap.php), this page will show the summary details of all happenings relating in that clickable area. How to get the system checked against database upon user clicking that area and show all happenings occurred in that building?

These are my amended codes now.. Please advice and Thanks.

<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 has added a great deal of functionality for maps in the last few years. You might want to explore some the tutorials on SVG, viewbox, viewports and other techniques.

Most of the tutorials use divisions instead of tables.

The easiest thing to do is to make the outer division position=relative then set the inner elements in absolute position to this division.

Something like: 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>

The attribute "position: relative" says images in the block should be relative to the block. Then you use position:absolute to place the items. The wording is not intuitive.

The viewbox concept might help you. It lets you design your maps independent of the display. Viewbox makes it easy to resize your graphic display.

In responsive design, you want your outer container to be a viewport that is relative to the size of the browser. That way the images can expand or contract to fill up the screen.

If you want to get serious about maps, I would consider SVG. That way you can use SVG to draw the actual things that appear on the map.

The opening code for a view box might be something like:

<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">

This box is 1000px by 500px. The center point is (0,0).

see example

My first attempt at an svg map is on http:arizonacolor.us toward the bottom. My mapping attempt with relative positioning is on maps.protophoto.com