更改可點擊的座標圖像到css

我試圖使我的網站的背景圖像在某些座標中可點擊。我沒有編輯主模板的能力，因爲我使用的腳本是預編譯的，可以添加自定義代碼（phpfox）。更改可點擊的座標圖像到css

我的問題是我使用的代碼是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>

有什麼建議？

來源

2014-12-04 Pablo

據我所知，圖像映射的座標只是一個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。問候。

來源

2014-12-04 23:40:52 Verhaeren

請如果你願意。 – Pablo 2014-12-05 05:24:21

@Pablo我用新的信息更新了我的答案。 – Verhaeren 2014-12-05 17:59:28

我想不出一個純CSS的解決方案。但是，如果你想要把圖像變成一個div爲背景，你可以通過jQuery獲得點擊relativ的位置到您的網站 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) });

來源

2014-12-04 23:43:30

我也會放棄這一點。謝謝 – Pablo 2014-12-05 05:24:44

更改可點擊的座標圖像到css

回答

相關問題