CSS交互式地圖

我不是一個乾淨的CSS編碼器，所以這可能是我的問題的癥結所在......但是......我已經拼湊出本教程的交互式地圖：http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/。CSS交互式地圖

我的解決辦法：http://www.paideiaschool.org/testing/barb_map.htm

我想我有地圖working--的最初的「翻車」（我只編碼在地圖的左上角的一個建設），並很高興與。

我的問題是我想要地圖的傳說做與地圖的翻轉相同的東西。我想出了一個笨拙的解決方案（標記爲'1509'），但在所有瀏覽器中都不太好，這就告訴我我在某個地方出了問題。

我試圖避免JavaScript以及。

主要問題是什麼？

來源

2012-03-27 wrede66

它打破了（不正確地在Safari和Chrome和Opera的位置），在FF，卡米諾作品，並IE 8和9. – wrede66 2012-03-27 16:22:03

我不認爲你可以避免使用Javascript，並仍然得到你想要乾淨的。沒有JS，它最好是笨拙的。最簡潔的解決方案是將HTML數據放在一個CSS腳本文件中，當它處於活動狀態時。然後將圖例和地圖與「活躍」狀態結合在一起。否則，你必須做你正在做的事情，並複製地圖和圖例的HTML，並有效地有兩個活動的場景，這將是很麻煩的管理。 – jmbertucci 2012-03-27 16:53:41

這很有道理。那麼對JavaScript來說，對我來說就是一個更加陰暗的領域。 – wrede66 2012-03-27 18:19:18

Here's an updated jsFiddle for part one

這裏的基礎知識：

<div id="city-map"> 
    <a href="#" id="mac"><div class="pop-up">...</div></a> 
    <a href="#" id="admin"><div class="pop-up">...</div></a> 
    ... 
</div>

我們利用錨標記的圖像地圖「熱點」。我們使用CSS將這些「熱點」絕對定位在適當的位置，並且我們執行基本的背景圖像精靈「技巧」，就像您在原始代碼中所做的一樣。

但是，我更新了你的精靈圖像，讓它有兩個「懸停」圖像。在製作具有非方形圖像點的圖像懸停地圖（如建築物彼此重疊）時，單個懸停狀態會出現問題，並顯示熱點圖層中顯示的「鄰居」圖標。這是由於正確的HTML塊是方形的，不能繪製奇怪的形狀。我們通過額外的圖像狀態來解決這個問題，這樣您可以使鄰居看起來不被突出顯示。

彈出框

<div class="pop-up"> 
    <h1 class="title">Mac</h1> 
    <div class="content">Some Content</div> 
</div>

所有彈出框有這個HTML格式。我的立場：絕對;他們離開標準的左側：-999em;招。我製作了CSS，爲它們提供了一個標準的彈出式位置，在熱點框和彈出框之間留有一點空隙。這有助於確保您的鼠標在到達新的熱點時能夠「擺脫」熱點。否則，你會將鼠標懸停在彈出框中，直到兩者都結束時它纔會消失。

<div id="city-map-legend"> 
    <div id="glamour-photo"> 
     <img src="..." id="mac-img" /> 
     <img src="..." id="admin-img"/> 
     ... 
    </div> 
    <div id="cml-list"> 
     <h2>Around Campus</h2> 
     <ul> 
      <li><a id="mac-list" href="#">Mac</a></li> 
      ... 
     </ul> 
    </div> 
</div>

對於「地圖傳說」，我有一組「魅力圖像」和一個鏈接列表。相當標準的東西。關鍵是他們是如何與身份證綁定在一起的。 JavaScript將使用它來交換圖像和CSS狀態，因爲我們將三個元素（地圖，魅力圖像和鏈接列表）綁定在一起。

地圖上的ID是直接向上的ID名稱，如「mac」。在魅力圖像中的ID是「[id] -img」（即「mac-img」）。並且列表中的ID是「[id] -list」（即「mac-list」）。

<script type="text/javascript" src="*"></script> 
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

我建議使用jQuery來幫助做簡單的JavaScript的ING和Google API加載它便於內容分發網絡的好處。

真的剩下的就是JavaScript事件。

$(document).ready(function() { 
    // highlight map when legend link is hovered 
    $('#cml-list a').hover(
     // hover over 
     function(){ 
      // get id code 
      var id = $(this).attr('id'); 
      // tokenize string to get main id code 
      var tokens = id.split('-'); 
      id = '#' + tokens[0]; 
      // add active class to map id 
      $(id).addClass('active'); 
     }, 
     // hover out 
     function(){ 
      // clear all .active classes from map 
      $('#city-map a').removeClass('active'); 
     } 
    ); 
});

上面發生的是我們告訴JavaScript在任何時候有人懸停列表鏈接時觸發JavaScript。有兩個事件在懸停，進出。

當你把光標移動到鏈接，我們從它那裏得到的基本ID值和所有我們做的是應用CSS類「活動」到地圖中的「熱點」。「.active」類將基本上「打開」地圖項目，就好像它懸停在一起（如果您注意到在CSS中，所有：懸停選擇器樣式也與'.active'類共享）。

當我們徘徊了，我們只是告訴了jQuery刪除所有「活躍」類。剩下要做的就是交換也編寫一些代碼，爲「魅力」圖像做同樣的事情。只需將其打開（顯示：塊）或關閉（顯示：無）。一個問題是，如果沒有其他選擇，除非我們只是希望以前激活的魅力圖像保持活動狀態，否則我們總是會重新開啓默認圖像。

我沒有觸及到的代碼位呢。我會看到我可以稍後更新它，也許留下一點點讓你玩。

更新

我開發它主要是在Chrome和Firefox的一點。我剛剛在IE7/8/9中檢查了，它似乎工作正常。
我更新的jsfiddle包括魅力影像互換。我也有一個小的CSS錯誤，我把浮球放在錯誤的地方。所以，最新的工作。
注我沒有爲所有位置做CSS。我用一些例子做了幾個例子，但剩下的給你。 =）

順便說一句，我更新您的地圖圖像，並上傳它imgur.com =>http://i.imgur.com/n7spM.png

來源

2012-03-28 23:24:53 jmbertucci

這太棒了！非常感謝你的幫助！ – wrede66 2012-04-12 17:34:30

CSS交互式地圖

回答

相關問題