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の場合のみ

答えて

関連する問題