Question

我正在制作一张显示我们分支机构的地图。当鼠标放在我们的一个分支上时，它会在城市上显示不同的图片。为此，我准备了一个html页面，其中包含以下代码及其工作！但是，当我将代码复制到我的wordpress页面时，它无法正常工作！

    <html>
<head>
<style>
</style>
<body>

<center><img src="TurkeySvg.png" usemap="#harita" ></center>
<map name="harita">
<a href="#" onmouseover="document.getElementById('tshirt').style.display='block';" onmouseout="document.getElementById('tshirt').style.display='none';">
<area shape="rect" coords="1081,244,1227,347" href="" onmouseover="this.src='samsun.png';"></a>
</map>
<div id="tshirt" style="position: absolute; left: 55%; top: 15px; width: whatever, height: whatever; border: 2px solid #000000; display: none;">
<img src="samsun.png" />
</div>
</body>
</head>
</html>

我将代码复制/粘贴到html区域的wordpress页面并更正图片链接，但它只显示背景图片。

您可以在此处查看我的wordpress页面：https://www.firfir.org/tr/harita/

Answer 1

我立即看到的一个问题是，您的<head>标记在错误的位置关闭：

在开始<body>标记之前关闭它。

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>

    <body>

    </body>
 </html>

只是帮助您实现目标的一个例子：

display: block;对于a标记非常重要，但我的观点是，如果带有悬停状态的a标记没有宽度＆amp;，那么它正在您的那个页面上工作，您无法得到结果。高度，因为HTML页面没有呈现任何元素，没有元素他们没有悬停状态。

更改图像宽度以使其适合，以便您可以看到结果

map>a,map>a>p {
    display: block;
    height: 20px;
    width: 200px;
    background-color: red;
}

img {
width: 50%;
}

#tshirt {
    position: absolute;
    width: 11%;
    height: 7%;
    left: 48%;
    top: 46px;
    border: 2px solid rgb(0, 0, 0);
    display: none;
}

<div class="wpb_text_column wpb_content_element ">
  <div class="wpb_wrapper">
    <p></p>
    <center><img src="https://www.firfir.org/tr/wp-content/uploads/2018/02/TurkeySvg.png" usemap="#harita"></center>
    <p></p>
    <map name="harita" style="min-height: 1px;height: 20px;width: 20px;">
    <a href="#" onmouseover="document.getElementById('tshirt').style.display='block';" onmouseout="document.getElementById('tshirt').style.display='none';" style="display: block;height: 20px;width: 20px;">
    <p>Hover me to see result</p>
    <area shape="rect" coords="1081,244,1227,347" href="" onmouseover="this.src='samsun.png';"></a><br>
    </map>
<div id="tshirt"><img src="https://www.firfir.org/tr/wp-content/uploads/2018/02/samsun.png"></div>
</div>
</div>

Onmouseover / out代码在Wordpress中不起作用

1 个答案: