繪製圖像以獲取jQuery的X/Y座標。像Dreamweaver中的圖像映射

-2

有沒有一種在Dreamweaver中繪製圖像並獲取像圖像映射的座標的方法。繪製圖像以獲取jQuery的X/Y座標。像Dreamweaver中的圖像映射

然後，我想使用座標，以便用戶可以根據他們點擊的圖像的哪部分來獲取關於圖像的信息。像http://store.nike.com/us/en_us/product/free-flash-id/builder/

問題是我不知道如何獲得座標。我希望能夠跟蹤圖像並獲得座標。然後使用函數中的座標。當用戶點擊座標時，js會說「你剛剛點擊了圖像的這個區域」

謝謝！

來源

2013-10-27 user2238083

是的，它們存在。這裏有什麼問題呢？在問了30個問題之後，你應該知道如何寫出一個合適的問題 – Bojangles

使用圖像映射有什麼問題？爲什麼你需要重塑它？ – VeXii

你可以得到一個用戶點擊的圖像內這樣的座標（相對於圖像）（小提琴：http://jsfiddle.net/j8DBw/）：

var imageCoords = $("img").offset(); 

$("img").click(function(event){ 
    var clickPageCoords = { 
     x:event.clientX, 
     y:event.clientY 
    } 

    var imageRelativeCoords = { 
     x: clickPageCoords.x - imageCoords.left, 
     y: clickPageCoords.y - imageCoords.top, 
    } 
    console.log(imageRelativeCoords); 
})

來源

2013-10-27 19:07:38 pax162

謝謝帕克斯，jsfiddle不適合我，但我喜歡這個想法，我認爲這樣做會很好。 – user2238083

@ user2238083嗯，它應該工作，你檢查控制檯。 – pax162

我只是得到這個錯誤「」NetworkError：500內部服務器錯誤 - http://jobs.jsfiddle.net/random.js?callback=Request.JSONP.request_map.request_0「」我想我會使用下面的鏈接但感謝您的解決方案。 – user2238083

我以爲影像地圖只是一個Dreamweaver的功能。 VeXii的評論後，我發現這些解決方案。

http://www.maschek.hu/imagemap/

http://www.image-maps.com/

感謝大家的幫助！

來源

2013-10-27 19:30:02 user2238083

繪製圖像以獲取jQuery的X/Y座標。像Dreamweaver中的圖像映射

回答

相關問題