替代圖像地圖（也許在JavaScript？）

好的，所以我想知道如果有一種替代的，輕量級的方式來創建一個圖像映射。替代圖像地圖（也許在JavaScript？）

基本上，我想借此圖片：

而且有圖點亮的部分，當他們上空盤旋，有點像這個（我嘲笑它在Photoshop）：

的其他部分（我還沒有命名）應該能夠做同樣的。此外，我希望能夠稍後使用JavaScript來從這些部分後面出現滑動鏈接（我現在大概知道該怎麼做，所以我沒關係）

有沒有人有任何建議？只是尋找什麼的總體方向會很好。

來源

2013-10-18 squids

哦，我的。我非常肯定，可以用純CSS實現。有點困難，但這是一個不錯的挑戰;） – Arkana

是的！我知道我可以做一個翻滾，但如果有一種方法我可以做到這一點，而無需加載六個不同的圖像，我很樂意。我剛開始使用JavaScript，所以我試圖在儘可能多的地方儘量減少文件大小;） – squids

@ Arkana：好的，我已經玩了一下，我想也許我可以將全綵色圖像作爲背景，然後讓這三個圓圈以半透明度覆蓋圖像。然後當你把鼠標放在它上面，瞧，不透明度被設置爲0，並且圖像（或者它的一部分）出現！然而！如果有辦法讓兩個圓圈同時消失以解決重疊區域，那將解決我的問題。然後我會在白色部分的中間貼一張圖片。有什麼建議麼？並感謝您的幫助。我學到了很多東西。 – squids

取兩幅圖像 1）正常圖像 2）的特定部分盤旋圖像

<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" /> 

<map name="Map" id="Map">  
    <area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/> 

</map> 



<script> 


function onHover6(image1) 
{ 
document.getElementById('originalimage').src=image1; 
} 
function onout6(image2) 
{ 
document.getElementById('originalimage').src=image2; 
} 
</script>

在這裏時，當你hover上座標，圖像變更hoverimages和on mouseout其改變爲原始higligthed圖片。

來源

2013-10-18 09:58:12 Pbk1303

地圖標記會很好，它實際上並不重要，因爲它不需要任何外部插件。但是，由於您只是想要一個大概的想法：一旦由於某種錯誤，我無法使用地圖標記。所以我將原始圖像分成不同的圖像（將它們定位爲原始圖像），然後在不同的部分上使用事件。很煩，但是一個解決方法。

來源

2013-10-18 10:03:30

謝謝 - 我不知道我該如何拼湊一些複雜的東西，雖然XD我可以試試它，如果沒有其他作品:) – squids

圓圈很容易處理CSS。你可以像這樣開始：

width: 140px; 
height: 140px; 
background: rgba(255, 0, 0, 0.3); 
-moz-border-radius: 70px; 
-webkit-border-radius: 70px; 
border-radius: 70px;

FIDDLE

希望它能幫助。

來源

2013-10-18 10:09:46 EdenSource

謝謝 - 這不完全是我正在尋找的解決方案，但我不知道你可以做到這一點。我會看看我是否無法玩弄它。 – squids

這是我很難實現中間的那個白色的形狀，但這裏有一個簡單的嘗試：

http://jsfiddle.net/w8zTz/

三 div

只有和一些CSS：

HTML

<div class="rojo"></div> 
<div class="azul"></div> 
<div class="amar"></div>

CSS

div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;} 
.rojo {background:red; top:0; left:30px;} 
.azul {background:cornflowerblue; top:60px; left:0;} 
.amar {background:gold; top:60px; left:70px;} 
div:hover {opacity:1; z-index:-1}

（Z-index用於將div放在另一個之後並達到透明度）。

希望這會有所幫助:)

來源

2013-10-18 10:22:25 Arkana

哇 - 多麼優雅的做法！我只是想弄清楚如何突出顯示交叉點，然後也許我可以在中間貼一個圖像來獲取白色部分。謝謝！ – squids

是的，那個棘手的問題！「內在」形狀，無論是白色的還是交叉點，就像你說的那樣。你有沒有看到CSS的[Chrome徽標]（http://cssnerd.nl/articles/pure_css_chrome_logo.html）？我認爲它也可以提供幫助。 – Arkana

有趣。至少，在Firefox（27.0.1）中，它顯示了「懸停」的弱點和/或模糊性：在交叉點內移動時，它會閃爍，因爲div會不透明度1交替變化。（在三路交叉路口，三條路線中的兩條之間閃爍）。 – fortboise

替代圖像地圖（也許在JavaScript？）

回答

相關問題