我已经创建了一个交互式地图,带有工具提示库,您可以将鼠标悬停在所需的国家上并获取信息,但是我必须在后端添加代码。我使用html / css / js做到了。现在,我想创建一个带有php字段的表单,只需单击或键入即可在前端创建那些悬停效果。并保存以显示它。
例如,这是津巴布韦(SVG-Map)的路径代码:
<path
d="m 562.70375,527.0484 -0.254,-0.172 -0.347,-0.112 -0.442,-0.052 -0.573,0.021 -0.706,0.095 -0.757,-0.115 -0.809,-0.322 -0.671,-0.114 -0.802,0.14 -0.036,0.003 -0.138,-0.109 -0.22,-0.235 -0.365,-0.042 -0.099,-0.054 -0.082,-0.088 -0.054,-0.112 -0.021,-0.125 0.06,-0.386 -0.033,-0.043 -0.097,-0.047 -0.201,-0.046 -0.481,-0.175 -0.606,-0.17 -0.983,-0.186 -0.382,-0.048 -0.089,-0.057 -0.11,-0.142 -0.189,-0.443 -0.177,-0.292 -0.423,-0.451 -0.067,-0.139 0.021,-0.358 0.031,-0.288 0.045,-0.244 -0.02,-0.229 -0.006,-0.284 0.013,-0.19 -0.057,-0.082 -0.153,-0.058 -0.437,-0.026 -0.528,0.011 -0.017,-0.288 -0.051,-0.446 -0.098,-0.256 -0.122,-0.133 -0.243,-0.139 -0.491,-0.19 -0.669,-0.289 -0.572,-0.428 -0.655,-0.531 -0.205,-0.092 -0.242,-0.498 -0.368,-0.852 0.024,-0.283 -0.056,-0.139 -0.358,-0.417 -0.079,-0.217 -0.063,-0.219 -0.569,-0.61 -0.194,-0.266 -0.148,-0.342 -0.147,-0.273 -0.124,-0.11 -0.162,-0.185 -0.112,-0.212 -0.052,-0.158 0.043,-0.211 0.055,-0.145 0.541,0.15 0.296,0.013 0.232,-0.074 0.286,0.1 0.342,0.274 0.372,0.053 0.403,-0.17 0.544,0.052 0.685,0.273 0.568,0.055 0.676,-0.244 0.603,-0.674 0.568,-0.633 0.558,-0.73 0.336,-0.589 0.493,-0.479 0.65,-0.369 0.662,-0.311 1.013,-0.381 0,10e-4 0.202,-0.315 0.068,-0.342 0,-0.476 0.052,-0.308 0.106,-0.141 0.168,-0.109 0.217,-0.142 0.667,-0.361 0.559,-0.231 0.68,-0.152 0.745,-10e-4 0.718,-0.002 0.408,-10e-4 0.006,0.457 0.031,0.515 0.08,0.049 0.54,0.011 0.866,0.037 0.835,0.034 0.533,0.374 0.179,0.08 0.554,0.1 0.708,0.623 0.852,0.058 0.586,0.195 0.516,0.214 0.297,0.257 0.192,0.058 0.26,0.019 0.126,0.024 -0.027,0.185 -0.174,0.314 0.023,0.45 0.239,0.624 0.032,0.544 -0.073,0.959 0.002,0.931 0.025,0.333 0.039,0.22 0.051,0.121 -0.01,0.138 -0.142,0.392 -0.114,0.412 -0.004,0.165 -0.044,0.117 -0.085,0.103 -0.372,0.191 -0.063,0.118 10e-4,0.214 0.047,0.18 0.14,0.066 0.168,0.102 0.066,0.134 10e-4,0.142 -0.054,0.263 -0.15,0.435 0.15,0.502 0.167,0.326 0.231,0.376 0.096,0.233 -0.005,0.167 -0.035,0.163 -0.345,0.69 -0.249,0.43 -0.304,0.46 -0.402,0.289 -0.104,0.139 -0.041,0.158 0.014,0.346 -0.018,0.363 -0.344,0.557 0.213,0.48 -0.048,0.045 -0.116,0.068 -0.495,0.541 -0.501,0.549 -0.366,0.401 -0.416,0.456 -0.466,0.512 -0.399,0.439 z"
title="Zimbabwe"
id="ZW" data-tooltip-content="#ZW-Content" />
数据工具提示内容使它更改颜色,就像激活它一样。
在代码中键入data-tooltip-content后,出现一个图像。 IMAGE
,如果您单击国家/地区,此代码将显示相关信息:
<span id="ZW-Content"><b>Zimbabwe</b><br/>Nisi excepteur anim ex do.<br>Lorem nisi qui fugiat laborum tempor Lorem occaecat sunt irure elit.</span>
我想通过简单的键入或单击前端的复选框来进行那些步骤(1.激活数据工具提示内容和2.信息显示),但是我不知道如何制作类和php形式的国家/地区的ID。