滾動懸停圖像

-2

我在互聯網上搜索了很多，但我找不到任何有用的鏈接。我正在嘗試開發一個自定義菜單。滾動懸停圖像

它需要是一個基於區域的翻轉菜單，它取決於用戶當前正在將圖像的哪一部分懸停。圖像和相關鏈接需要根據用戶懸停在圖像上的哪個區域進行更改。檢查下面的圖片： close box

點擊下一個圖像將低於之一後， open box

最後，當我將鼠標懸停在比薩餅的任何具體切片，圖像應相應改變。一個例子是下面的圖片：

enter image description here

是否有可能與CSS3，JavaScript的？

你嘗試過什麼了嗎？ – j08691

是的，我今天花了將近6-7個小時。但我甚至沒有接近解決方案。 –

請發佈您的問題中的代碼。 – j08691

我可以想到兩種不同的方式。既然你標記JQuery我假設這是可以接受的。 pageX和pageY跟蹤屏幕上的鼠標移動，並可用於確定屏幕的哪個區域正在懸停。這是我提出來確定座標的小提琴：http://jsfiddle.net/cpk3mqxw/

$("#image").mousemove(function (e) { 
mousex = e.pageX; 
mousey = e.pageY; 
$("#update").text("x: " + mousex + " y:" + mousey); 
});

編輯：爲了檢查座標，你需要做的是網頁作爲網格系統的人認爲，按通常用JavaScript和評估，如果mousex大於132且小於155，它必須位於圖像的這一部分之上。同樣，不斷更新x和y座標的單獨span標籤將會有所幫助。 a.e：

if(mouse x >= 102 && mousex <= 220 && mousey >= 26) { 
//do this 
}

它最終不負有心人，但它是相當多的額外工作。另一種方法是使用圖像映射。

<img src="image.jpg" id="image1" usemap="#one"> 
<map name="one"> 
<area coords="30, 50, 70, 100" href="gohere.html"> 
</map>

如果你想的區域被高亮顯示或樣式，你可以使用maphilight.js，你在這裏可以找到更多信息：http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/

2015-04-22 16:46:14 zfrisch

糟糕的想法來提醒mousemove上的東西。 – Shikkediel

@Shikkediel你說得對，我在實踐中同意這不是最好的主意，我回頭注意到最好把它放在span標籤中。我絕對不是故意暗示它是最有效的方法，只是想展示功能。 – zfrisch

爲什麼不把它變成console.log？粘貼此代碼將不可行... – Shikkediel

您的問題的最佳解決方案是創建一個包含比薩圖片的精靈，每張圖片上缺少一個切片。然後，您創建一個div一個比薩餅圖像的大小：

<div id="myPizza"></div>

然後，您可以檢查鼠標的X和Y位置在這個div使用similare這一個http://coursesweb.net/javascript/get-mouse-coordinates-inside-div-image_s2

腳本然後，根據光標在你的圖像上，你可以放置一個具有正確背景位置的類。我建議你這個來創建你的類：http://www.spritecow.com/

希望它幫助，簡單的腳本與精靈！

2015-04-22 16:49:35

謝謝。我一定會嘗試一下。 –

這是我的榮幸，如果你需要更多的建議，或者如果你不明白它是否正確告訴我，我曾經在一個網站上做過一個麪包片在滾動上被吃掉，並且與精靈一起工作得很好式。 –

我已經能夠解決這個問題。

我用<map>和<area>來定義我需要的每個區域（比薩餅片）。然後我將onclick()和onmouseover()事件處理程序添加到每個區域以調用一個函數來更改圖片。

HTML

<area shape="circle" coords="200,250,25" onmouseover = "changePic('newImage.png')" /> 
<img src='start_pic.png' name='mainPic' />

的JavaScript

function changePic(img){ 
    mainPic.src = img; 
}

2015-04-22 20:16:53

我也認爲如果我使用精靈，它會更好的加載圖像。但我不知道如何在區域標籤內使用精靈，你知道嗎？ –

回答