Question

我试图让我的网站的背景图像在某些坐标中可点击。我没有编辑主模板的能力，因为使用的脚本是预先构建的，以便在其中添加自定义代码（phpfox）。

我遇到的问题是我使用的代码是html，我需要它是css

<img url="../image/layout/bg.png" width="1920" height="1080" border="0" usemap="#Map" />

<map name="Map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:ImithRian -->
<area shape="rect" coords="43,36,174,803" href="http://www.battlefieldsquad.com/" />
<area shape="rect" coords="1469,99,1866,225" href="http://www.battlefieldsquad.com/index.php?do=/battlefield4/" />
<area shape="rect" coords="1564,457,1793,619" href="http://www.battlefieldsquad.com/index.php?do=/pages/3/" />
<area shape="rect" coords="1597,657,1773,878" href="http://www.esl.eu/eu/team/7931638/" />
</map>

有什么建议吗？

Answer 1

据我所知，图像映射的坐标只是一个html功能，不能用作css中的样式规则。如果你想在不访问html的情况下更改坐标值，可以通过javascript到达元素然后执行修改。如果您有兴趣以这种方式进行，我可以为您提供该代码。

这是您使用javascript（THE FIDDLE HERE）

解决问题的方法

让我们假设您有一张世界地图，并为大陆定义了一个可点击链接：北美洲，南美洲，欧洲和亚洲，非洲。

<img src="http://3.bp.blogspot.com/--Qn8gNCWlUc/UVhKBl5o5aI/AAAAAAAACYI/wMLgckCYQIs/s1600/Screen+Shot+2013-03-31+at+12.59.10+AM.png" border="0" usemap="#Map" />

<map name="Map">

<area shape="rect" title="north america" coords="43,36,174,803" href="http://www.battlefieldsquad.com/" border="2" />
<area shape="rect" title="south america" coords="1469,99,1866,225" href="http://www.battlefieldsquad.com/index.php?do=/battlefield4/" />
<area shape="rect" title="eurasia" coords="1564,457,1793,619" href="http://www.battlefieldsquad.com/index.php?do=/pages/3/" />
<area shape="rect" title="africa" coords="1597,657,1773,878" href="http://www.esl.eu/eu/team/7931638/" />
</map>

<br /><br />

<button type="button" id="fixer">Fix this mess!</button>

当您将鼠标悬停在地图上时，您会发现只有北美的形状存在且处于错误的位置（一秒钟后会出现一个提示）。

在地图上刻录你有一个按钮来解决这个问题。该按钮执行此代码：

document.getElementById("fixer").onclick=function(){

    var coords = ["70,100,400,320", "320,350,425,580", "510,100,1050,300", "480,300,680,500"];
    var mapper = document.getElementsByTagName("area");

    for(var i = 0, j = mapper.length;i < j;i++){

        mapper[i].coords = coords[i];

    }

}

按下按钮后，您可以将鼠标悬停在大陆上，然后检查它们是否正在显示在正确的位置，因为js代码会更改每个形状的坐标：

var coords = ["70,100,400,320", "320,350,425,580", "510,100,1050,300", "480,300,680,500"];

这是一个从上到下为每个区域形状设置正确坐标的数组。

其余代码是设置坐标。您只需编辑上面的行就可以满足您自己的坐标。

我希望它有所帮助。顺便说一句，如果你最终要使用这种方法，你可能想要在你的问题中添加标签javascript。问候。

Answer 2

我想不出纯粹的css-Solution。但是如果你想把图像作为背景放入div中，你可以通过jQuery获得点击相对于你的网站的位置 HTML：

<div class="background">
  Some content and a background image
</div>

使用Javascript：

$('.background').click(function(event){ console.log(event.pageX + " " + event.pageY); //at some coordinate do something (e.g. go to another site) });

将可点击的坐标图像更改为css

2 个答案: