圖像映射與圖像彈出懸停在熱點

我正在建立一個日曆，在某些日子有事件。日曆是一個jpg，我創建了一個圖像映射。當您將鼠標懸停在日曆上的熱點或「事件」上時，我需要將圖像懸停在鼠標指針旁邊，鼠標指針上會顯示事件信息，然後在鼠標離開熱點時消失。我有六個熱點，每個都有一個javascript函數。該功能用正確的事件圖像替換彈出圖像。下面是一個功能區域和其中一個區域的示例（其他區域相同，不同的圖像名稱和座標）圖像映射與圖像彈出懸停在熱點

我有事件圖像在懸停的日曆下彈出，但頁面拒絕重新定位圖像到當前鼠標位置的位置。我怎樣才能使彈出式圖像重新定位？我究竟做錯了什麼？或者我應該使用不同的方法？

JS：

function pop(e) { //function called by first hotspot 
     Image.src = "../img/Bubble - Aloha.png" //event image 
     document.popup1.src = Image.src; 
     var thing = document.getElementById("popup1"); 

     $("#popup1").toggle(); 
     thing.style.left = e.screenX + 'px'; 
     thing.style.top = e.screenY + 'px'; 

     return true; 
     }

MAP：

<map id="feb1050" name="feb1050"> 
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);" onMouseOut="pop(event);"/> 
...</map>

HTML：

<ul><li> 
     <img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050"> 
    </li> 
    <li> 
     <div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;> 
     </div><br />Click Here To RSVP! 
    </li> 
</ul>

來源

2013-03-01 woodlumhoodlum

也許而不是操縱圖像本身的位置，你可以放置封閉的div。對於HTML：

<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar"> 
<br />Click Here To RSVP!</div>

有了一些CSS的DIV：

.popup { 
     position:absolute; 
     z-index:20000; 
     top: 0px; 
     left: 0px; 
     display: none; 
}

然後是JS：

function pop(e) { //function called by first hotspot 

    Image.src = "../img/Bubble - Aloha.png" //event image 
    document.popup1.src = Image.src; 
    var thing = document.getElementById("popup"); 

    thing.style.left = e.clientX + 'px'; 
    thing.style.top = e.clientY + 'px'; 
    $("#popup").toggle(); 

    return true; 
}

請注意，我也將使用clientX和clientY而非screenX和screenY：

What is the difference between screenX/Y, clientX/Y and pageX/Y?

Working example on JSFiddle

來源

2013-03-01 08:46:05

我曾嘗試過，所以我最初創建了這個div。但是好的提示是使用clientX，我嘗試了三種方法，並且不確定它們的區別。 – woodlumhoodlum 2013-03-01 23:00:13

不用擔心。你能不能讓它工作？我認爲clientX/clientY是你需要的主要改變，代碼似乎在此之後完美運行。 – 2013-03-01 23:13:53

沒有，改變了clientx/y，它沒有幫助。圖像仍然卡在下面。 – woodlumhoodlum 2013-03-02 21:56:29

有一件事我已經做了（在一個情況幾乎完全是這樣的：一個客戶想要一些定價將鼠標懸停在價格關鍵字上時出現的框）幾乎完全是CSS和HTML。您可以在<a>標籤內生成彈出區域，然後將其置於放置在懸停區域旁邊的一些<span>（或絕對位置<div>）內。確保只爲a:hover選擇器定義了這些span/div元素，並將其設置爲a:x其餘選擇器上的display:none;，以便span/div框僅在您懸停在錨點上時出現，並在你不是。

來源

2013-03-01 07:40:35 L0j1k

我曾嘗試圍繞「彈出」div與跨度，但由於某種原因，我不認爲我能夠設置「頂部」和「左」的任何值降落圖像內的圖片。就好像它在日曆下面強制它。我會用錨標籤試試，也許這就是訣竅。或者它可能是BC我把它放在列表標籤內。我會告訴你明天會怎麼樣。 – woodlumhoodlum 2013-03-01 07:47:21

圖像映射與圖像彈出懸停在熱點

回答

相關問題