Javascript：在圖像的onMouseOver＆onMouseOut上打開並關閉新窗口，但僅當新窗口onMouseOver = true時

非常感謝您幫助我以前解決我的JavaScript腳本問題。我目前的問題是，我需要打開&分別關閉一個圖像的onMouseOver & onMouseOut上的新窗口，但是如果新窗口onMouseOver == true，那麼我不希望新窗口關閉。Javascript：在圖像的onMouseOver＆onMouseOut上打開並關閉新窗口，但僅當新窗口onMouseOver = true時

我相信有一個簡單的解決方案，但我似乎無法找到一種方法來取消圖像的onMouseOut =「closeDetails（）;」如果用戶懸停在新窗口。以下是我正在處理的大部分代碼。在此先感謝您的幫助。

<body> 
    <img name="img1" id="img1" onMouseOver="windowDelay(this);" 
      onMouseOut="closeDetails();" src="images/127.jpg" height="240" width="166"/> 
</body> 

<script language="JavaScript" type="text/javascript"> 

// This opens the movie details pop-up after an 
// half second interval. 
function windowDelay(thatImg) 
{ 
    winOpenTimer = window.setTimeout(function() {openDetails(thatImg);}, 2000); 
} 


// This is the function that will open the 
// new window when the mouse is moved over the image 
function openDetails(thatImg) 
{ 
    // This creates a new window and uses the hovered image name as the window 
    // name so that it can be used in the that window's javascript 
    newWindow = open("", thatImg.name,"width=400,height=500,left=410,top=210"); 

    // open new document 
    newWindow.document.open(); 


    // Text of the new document 
    // Replace your " with ' or \" or your document.write statements will fail 
    newWindow.document.write("<html><head><title>Movies</title>"); 
    newWindow.document.write("<script src='myDetails.js' type='text/javascript'>"); 
    newWindow.document.write("</script></head>"); 
    newWindow.document.write("<body bgcolor='white' onload='popUpDetails();'>"); 
    newWindow.document.write("... SOME OTHER HTML...."); 
    newWindow.document.write("</body></html>"); 


    // close the document 
    newWindow.document.close(); 
} 



// This is the function that will call the 
// closeWindow() after 2 seconds 
// when the mouse is moved off the image. 
function closeDetails() 
{ 
    winCloseTimer = window.setTimeout("closeWindow();", 2000); 
} 

// This function closes the pop-up window 
// and turns off the Window Timers 
function closeWindow() 
{ 
    // If popUpHover == true then I do not want 
    // the window to close 
    if(popUpHover == false) 
    { 
     clearInterval(winOpenTimer); 
     clearInterval(winCloseTimer); 
     newWindow.close(); 
    } 
} 

function popUpDetails() 
{ 
    // This will be used to prevent the Details Window from closing 
    popUpHover = true; 

    // Below is some other javascript code... 
} 
</script>

來源

2011-07-21 yerty

彈出一個花哨的工具提示窗口？哎呀！彈出阻止程序會阻止！使用Ajax驅動的工具提示。 – epascarello

我還不熟悉Ajax。但是，這不僅僅是一個奇特的工具提示，它將爲我的個人使用提供有用的信息。如果它不能在Javascript中實現，那麼我將學習和使用Ajax，但我更喜歡javascript中的解決方案。 – yerty

我建議不要爲此任務使用新的瀏覽器窗口。嘗試這樣的：

var popup = { 
    open = function() { 
    if (this.element == null) { 
     // create new div element to be our popup and store it in the popup object 
     this.element = document.createElement('div'); 
     this.element.id = "myPopup"; 
     // you don't need a full html document here. Just the stuff you were putting in the <body> tag before 
     this.element.innerHTML = "<your>html</here>"; 
     // Some bare minimum styles to make this work as a popup. Would be better in a stylesheet 
     this.element.style = "position: absolute; top: 50px; right: 50px; width: 300px; height: 300px; background-color: #fff;"; 
    } 
    // Add it to your <body> tag 
    document.body.appendChild(this.element); 
    // call whatever setup functions you were calling before 
    popUpDetails(); 
    }, 
    close = function() { 
    // get rid of the popup 
    document.body.removeChild(this.element); 
    // any other code you want 
    } 
}; 

// The element you want to trigger the popup 
var hoverOverMe = document.getElementById("hoverOverMe"); 
// set our popup open and close methods to the proper events 
hoverOverMe.onmouseover = popup.open; 
hoverOverMe.onmouseout = popup.close;

這應該做到這一點。它比新的瀏覽器窗口更容易控制。你會想自己調整CSS。

編輯：

這裏是指令與實際窗口做到這一點。重申一下，使用實際的窗口並不是完成此任務的最佳方式。程式化的div標籤看起來像一個窗口更好，因爲它提供了更多的控制，以及跨瀏覽器的標準化功能。但是，如果您必須使用一個窗口，在這裏它是：

// You can use many principles from the example above, but I'll give the quick version 
var popup; 
var hoverOverMe = document.getElementById("hoverOverMe"); 

hoverOverMe.onmouseover = function() { 
    popup = window.open("path_to_content", "popup"); 
}; 
hoverOverMe.onmouseout = function() { 
    popup.close(); 
};

它的工作原理，但不是很好（恕我直言）如果用戶有他們的設置，以便新窗口打開新窗口（就像我一樣），然後一個選項卡將打開。 JavaScript無法控制。在Firefox中，新選項卡將打開並獲得關注點，此時它會立即關閉，因爲hoverOverMe已啓動了其onmouseout事件（顯然會關閉窗口）。我想你也會在實際的窗口上遇到同樣的問題。

來源

2011-07-21 08:56:06 benekastah

謝謝您的建議。我之前有類似於你的代碼的東西，但我真的想爲我的電影數據庫彈出一個窗口。當您將鼠標懸停在電影圖片上時，我試圖製作類似於Netflix彈出窗口的內容。再次感謝您的幫助。 – yerty

編輯答案包括一個方法來做到這一點與一個窗口。僅供參考，Netflix不會爲您所談論的內容使用實際的窗口。他們使用'div'，就像我原來的回答（可以通過檢查Firefox或Chome中的元素來檢查）。無論你做什麼，我希望這可以幫助;） – benekastah

再次感謝您幫助像我這樣的新手 – yerty

Javascript：在圖像的onMouseOver＆onMouseOut上打開並關閉新窗口，但僅當新窗口onMouseOver = true時

回答

相關問題