如何翻轉效果添加到文本的地圖

好了，所以，我有這樣的地圖：如何翻轉效果添加到文本的地圖

the map

我需要添加一個過渡效果的國名（可以用做簡單：懸停在CSS中），但我找不到一個很好的方法來選擇文本的一部分，所以如果我懸停「歐洲」，它只是突出歐洲而不是每個字。

圖像是在PSD中，所以我有權訪問底圖+圖層。我怎麼能解決這個問題？我正在考慮在HTML中添加所有文本，並將其設置爲CSS（旋轉，間距等），這將需要很長時間，而且在適應不同分辨率時也會很痛苦。

你能主人建議什麼嗎？謝謝:)

參考圖像（文本所做的紅只是爲了表明有什麼東西在那裏，這將是翻轉效果）： enter image description here

來源

2015-04-06 drbernardi

你到目前爲止嘗試過什麼？請添加一些相關的代碼，至少上傳圖片並創建一個小提琴。要求「做到最好的方式」（意見）太寬泛，不符合SO標準。 – skobaljic 2015-04-06 08:48:23

我把圖片放在帖子的底部，這是禁止的嗎？我認爲我們可以使用它們託管在SO服務器上。 [這裏]（https://jsfiddle.net/34av7k07/）是我在哪裏，基本上我不知道。在做HTML/CSS之前，我想過要問這裏，我擔心這可能會導致糟糕的結果。 – drbernardi 2015-04-06 08:58:23

在html上添加文本並給出這種風格的確會是一種痛苦和危險，因爲字體在diff bwosers上經常發生變化。我認爲最好的方法是製作每個文本的圖像（我將使用sprite）並將圖像放置在地圖上（文本容器大小和絕對位置始終以％顯示，如果您希望它響應）。當然這需要時間。沒有簡單的方法去做你想做的事。 – 2015-04-06 09:13:19

這裏有一個想法：

body { 
 
    position: relative; 
 
} 
 
img { 
 
    width: 100%; 
 
} 
 
.states { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
} 
 

 
.map-container { 
 
    width:960px; 
 
    transform-origin: 0px 0px; 
 
    transform: scale(0.8); 
 
} 
 

 
a.state-name { 
 
    position:absolute; 
 
} 
 

 
a.state-name:hover { 
 
    background-image: url("http://i.stack.imgur.com/aB42n.gif"); 
 
} 
 
a#europe { 
 
    background-position: -420px -140px; 
 
    left: 420px; 
 
    top: 140px; 
 
    height: 45px;  
 
    width: 210px; 
 
}

<div class="map-container"> 
 
<img src="http://i.stack.imgur.com/319c9.gif" /> 
 
<img src="http://i.stack.imgur.com/aB42n.gif" class="states" /> 
 
<a id="europe" class="state-name" href="#"></a> 
 
</div>

備註：

您需要定義每個國家命名a標籤和適當的CSS規則：background-position, width, height, left, top像#europe例如
.map-container - 必須具有相同的寬度與原始圖像爲960px
你需要使用JS或CSS如果您需要調整地圖大小，則轉換屬性以縮放整個.map-container，否則懸停元素將錯位。
注重css transform性能

這是一個實驗性的技術。由於此技術的規範尚未穩定，請檢查兼容性表以找到適用於各種瀏覽器的正確前綴。另請注意，隨着規範的變化，實驗技術的語法和行爲在未來版本的瀏覽器中可能會發生變化。

來源

2015-04-06 10:15:35 AndreiDMS

如何翻轉效果添加到文本的地圖

回答

相關問題