我使用Image Map Pro来Map图像并添加链接。我使用一个HTML块( gutenberg )将第一个代码片段添加到我的页面。此外,我使用WP Code插件将第二个和第三个片段添加到正文中。没什么我做错什么了
我试过给Image Map Pro发消息,在WordPress论坛上发帖,在Facebook和Reddit上询问,没有帮助。
The code provided by Image Map Pro
Pasting the second and third code snippets into the body of my site, using WP Code plugin
Adding the first snippet of code into my website page where I want the image
The end result: absolutely nothing
最终的结果应该是一个图像的晾衣绳与三个可点击的链接嵌入。相反,它完全没有显示任何东西。
Image Map Pro提供的代码是:
<div id="image-map-pro"></div>
<script src="image-map-pro.min.js"></script>
<script>ImageMapPro.init('#image-map-pro', {"id":"cefca7b6-34bd-42ff-a9ff-acd4ecd75990","general":{"name":"Clothesline"},"artboards":[{"background_type":"image","image_url":"https://howthecrowflies.com/wp-content/uploads/2023/04/the-clothesline.png","children":[{"id":"5d6ed4f3-5656-4cfb-b76e-13dc9f0a15ed","title":"Poly","type":"poly","x":65.70121951219512,"y":16.20061610772358,"width":13.262195121951223,"height":16.966463414634145,"default_style":{"opacity":0},"mouseover_style":{"opacity":0.15540540540540543},"tooltip_style":{"background_color":"#82936a"},"tooltip_content":[{"type":"Heading","text":"REVIEWS","heading":"h3","other":{"id":"","classes":"","css":""},"style":{"fontFamily":"sans-serif","fontSize":20.8,"lineHeight":"normal","color":"#ffffff","textAlign":"center"},"boxModel":{"width":"auto","height":"auto","margin":{"top":0,"bottom":0,"left":0,"right":0},"padding":{"top":10,"bottom":10,"left":10,"right":10}},"id":"dff7359e-de06-465e-b81a-7b14fc81c823"}],"x_image_background":65.70121951219512,"y_image_background":16.20061610772358,"points":[{"x":0,"y":87.3015873015873},{"x":1.1494252873563218,"y":15.873015873015872},{"x":82.75862068965517,"y":0},{"x":90.80459770114942,"y":25.396825396825395},{"x":100,"y":73.01587301587301},{"x":20.689655172413794,"y":100}]},{"id":"110b3c2d-a352-4743-b69c-5cef7271659b","title":"Poly","type":"poly","x":34.29878048780488,"y":19.70163236788618,"width":27.59146341463414,"height":66.25,"default_style":{"opacity":0},"mouseover_style":{"opacity":0.15540540540540543},"tooltip_style":{"background_color":"#f89c6f"},"tooltip_content":[{"type":"Heading","text":"TRAVEL","heading":"h3","other":{"id":"","classes":"","css":""},"style":{"fontFamily":"sans-serif","fontSize":20.8,"lineHeight":"normal","color":"#ffffff","textAlign":"center"},"boxModel":{"width":"auto","height":"auto","margin":{"top":0,"bottom":0,"left":0,"right":0},"padding":{"top":10,"bottom":10,"left":10,"right":10}},"id":"e7742297-a907-4e7d-ad83-eeff5959124a"}],"x_image_background":34.29878048780488,"y_image_background":19.70163236788618,"points":[{"x":8.83977900552486,"y":53.65853658536586},{"x":3.867403314917127,"y":49.59349593495935},{"x":0,"y":43.90243902439025},{"x":0.5524861878453038,"y":38.61788617886179},{"x":1.1049723756906076,"y":30.48780487804878},{"x":3.314917127071823,"y":25.203252032520325},{"x":3.867403314917127,"y":19.10569105691057},{"x":5.524861878453039,"y":13.008130081300814},{"x":7.18232044198895,"y":7.317073170731707},{"x":9.94475138121547,"y":2.4390243902439024},{"x":16.574585635359114,"y":1.2195121951219512},{"x":24.30939226519337,"y":1.2195121951219512},{"x":32.59668508287293,"y":2.0325203252032518},{"x":36.46408839779006,"y":2.4390243902439024},{"x":45.30386740331492,"y":2.4390243902439024},{"x":51.38121546961326,"y":2.0325203252032518},{"x":57.4585635359116,"y":2.0325203252032518},{"x":64.64088397790056,"y":1.2195121951219512},{"x":72.92817679558011,"y":1.2195121951219512},{"x":79.55801104972376,"y":0},{"x":87.29281767955801,"y":0.8130081300813009},{"x":93.92265193370166,"y":1.2195121951219512},{"x":94.47513812154696,"y":6.910569105691057},{"x":95.02762430939227,"y":12.195121951219512},{"x":98.34254143646409,"y":16.666666666666664},{"x":97.79005524861878,"y":21.544715447154474},{"x":97.23756906077348,"y":25.609756097560975},{"x":98.34254143646409,"y":30.48780487804878},{"x":97.79005524861878,"y":35.77235772357724},{"x":98.89502762430939,"y":39.83739837398374},{"x":100,"y":45.52845528455284},{"x":99.4475138121547,"y":50.40650406504065},{"x":98.34254143646409,"y":54.87804878048781},{"x":95.02762430939227,"y":58.13008130081301},{"x":91.71270718232044,"y":61.78861788617886},{"x":88.39779005524862,"y":65.04065040650406},{"x":84.5303867403315,"y":67.47967479674797},{"x":82.87292817679558,"y":70.32520325203252},{"x":83.42541436464089,"y":76.82926829268293},{"x":83.42541436464089,"y":81.70731707317073},{"x":80.11049723756905,"y":88.21138211382113},{"x":72.92817679558011,"y":94.3089430894309},{"x":65.74585635359117,"y":97.96747967479675},{"x":56.9060773480663,"y":100},{"x":49.72375690607735,"y":98.78048780487805},{"x":43.0939226519337,"y":96.34146341463415},{"x":39.226519337016576,"y":91.869918699187},{"x":39.226519337016576,"y":87.39837398373984},{"x":39.77900552486188,"y":83.33333333333334},{"x":39.77900552486188,"y":78.86178861788618},{"x":40.88397790055249,"y":75.20325203252033},{"x":40.88397790055249,"y":69.91869918699187},{"x":41.988950276243095,"y":66.66666666666666},{"x":40.331491712707184,"y":63.82113821138211},{"x":39.77900552486188,"y":59.34959349593496},{"x":40.88397790055249,"y":56.50406504065041},{"x":39.226519337016576,"y":53.2520325203252},{"x":38.12154696132597,"y":47.96747967479675},{"x":36.46408839779006,"y":44.71544715447154},{"x":30.386740331491712,"y":44.71544715447154},{"x":24.861878453038674,"y":45.1219512195122},{"x":16.022099447513813,"y":47.15447154471545},{"x":10.497237569060774,"y":48.3739837398374}]},{"id":"e70c765c-d5f9-4a7e-975c-d3cec636cf53","title":"Poly","type":"poly","x":5.0304878048780495,"y":14.854071392276422,"width":16.768292682926827,"height":42.82012195121951,"default_style":{"opacity":0},"mouseover_style":{"opacity":0.15540540540540543},"tooltip_style":{"background_color":"#618483"},"tooltip_content":[{"type":"Heading","text":"BLOG","heading":"h3","other":{"id":"","classes":"","css":""},"style":{"fontFamily":"sans-serif","fontSize":20.8,"lineHeight":"normal","color":"#ffffff","textAlign":"center"},"boxModel":{"width":"auto","height":"auto","margin":{"top":0,"bottom":0,"left":0,"right":0},"padding":{"top":10,"bottom":10,"left":10,"right":10}},"id":"574d3efd-0e22-46d7-b12d-adffa374953f"}],"x_image_background":5.0304878048780495,"y_image_background":14.854071392276422,"points":[{"x":7.2727272727272725,"y":89.937106918239},{"x":0,"y":83.01886792452831},{"x":0.9090909090909091,"y":71.0691823899371},{"x":2.727272727272727,"y":61.0062893081761},{"x":5.454545454545454,"y":49.685534591194966},{"x":11.818181818181818,"y":47.16981132075472},{"x":15.454545454545453,"y":35.84905660377358},{"x":20,"y":25.78616352201258},{"x":25.454545454545453,"y":12.578616352201259},{"x":29.09090909090909,"y":3.7735849056603774},{"x":37.27272727272727,"y":0},{"x":48.18181818181818,"y":2.515723270440252},{"x":51.81818181818182,"y":8.80503144654088},{"x":51.81818181818182,"y":16.352201257861633},{"x":69.0909090909091,"y":19.49685534591195},{"x":73.63636363636363,"y":13.836477987421384},{"x":76.36363636363637,"y":5.660377358490567},{"x":89.0909090909091,"y":6.918238993710692},{"x":90.9090909090909,"y":15.09433962264151},{"x":89.0909090909091,"y":23.270440251572328},{"x":88.18181818181819,"y":33.33333333333333},{"x":91.81818181818183,"y":40.25157232704403},{"x":94.54545454545455,"y":49.685534591194966},{"x":97.27272727272728,"y":59.11949685534591},{"x":100,"y":69.81132075471697},{"x":94.54545454545455,"y":80.50314465408806},{"x":89.0909090909091,"y":90.56603773584906},{"x":80.9090909090909,"y":98.11320754716981},{"x":73.63636363636363,"y":99.37106918238993},{"x":61.81818181818181,"y":100},{"x":36.36363636363637,"y":99.37106918238993},{"x":17.272727272727273,"y":95.59748427672956},{"x":15.454545454545453,"y":89.937106918239}]}]}],"version":"6.0.5"})</script>
1条答案
按热度按时间9vw9lbht1#
在你的第一张图片中,它说
需要放在closingbody标签之前,然后你应该把脚本代码放在它之后。但是,您的代码段插件说脚本将打印在openingbody标记的正下方。虽然我知道一点网络开发,但它不是我的第一语言,所以这可能对情况没有影响。
我的另一个可能的解决方案是将脚本直接添加到HTML块中。我不确定是div还是脚本需要放在前面,但我知道脚本可以放在代码块中。