Javascript: ouvrir une nouvelle fenêtre sur onMouseOver & onMouseOut, mais seulement si new window onMouseOver = true

Merci à tous de m'avoir aidé avec mes problèmes Javascripting. Mon problème actuel est que je dois ouvrir & fermer une nouvelle fenêtre sur onMouseOver & onMouseOut, respectivement, mais si la nouvelle fenêtre onMouseOver == true alors je ne veux pas que la nouvelle fenêtre se ferme.Javascript: ouvrir une nouvelle fenêtre sur onMouseOver & onMouseOut, mais seulement si new window onMouseOver = true

Je suis sûr qu'il existe une solution simple, mais je n'arrive pas à trouver un moyen d'annuler l'image onMouseOut = "closeDetails();" si l'utilisateur passe la souris sur la nouvelle fenêtre. Voici la plupart du code que je traite. Merci d'avance pour votre aide.

<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>

Source

2011-07-21 yerty

Une fenêtre pop-up pour une info-bulle de fantaisie? yikes! Pop up bloqueurs bloquera cela! Utilisez les info-bulles Ajax. – epascarello

Je ne suis pas encore familier avec Ajax. Cependant, c'est plus qu'une infobulle et elle fournira des informations utiles pour mon usage personnel. Si ce n'est pas faisable en Javascript alors je vais apprendre et utiliser Ajax, mais je préférerais une solution en javascript. – yerty

Je recommanderais de ne pas utiliser une nouvelle fenêtre de navigateur pour cette tâche. Essayez quelque chose comme ceci:

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;

Cela devrait le faire. C'est beaucoup plus facile à contrôler qu'une nouvelle fenêtre de navigateur. Vous voudrez modifier le CSS vous-même.

EDIT:

Voici les instructions pour ce faire avec une fenêtre réelle. Pour réitérer, l'utilisation d'une fenêtre réelle n'est pas le meilleur moyen d'accomplir cette tâche. Une balise div stylisée pour ressembler à une fenêtre est préférable car elle offre plus de contrôle, ainsi que des fonctionnalités standardisées à travers les navigateurs. Toutefois, si vous devez utiliser une fenêtre, la voici:

// 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(); 
};

Il fonctionne, mais pas très bien (à mon humble avis). Si l'utilisateur a ses paramètres tels que de nouvelles fenêtres s'ouvrent dans de nouveaux onglets (comme je le fais), alors un onglet s'ouvrira. Javascript n'a aucun contrôle sur cela. Dans Firefox, le nouvel onglet s'ouvrira et obtiendra le focus, auquel cas il se fermera immédiatement car hoverOverMe a déclenché son événement onmouseout (ce qui ferme évidemment la fenêtre). J'imagine que vous auriez ce même problème avec une fenêtre réelle, aussi.

Source

2011-07-21 08:56:06 benekastah

Nous vous remercions de votre suggestion. J'avais déjà quelque chose de similaire à votre code, mais je veux vraiment une fenêtre pop-up pour ma base de données de films. J'essayais de faire quelque chose de similaire à la fenêtre contextuelle Netflix lorsque vous survolez une image de film. Merci encore d'avoir essayé d'aider. – yerty

Modifié la réponse pour inclure un moyen de le faire avec une fenêtre. Pour info, Netflix n'utilise pas les fenêtres réelles pour ce dont vous parlez. Ils utilisent un 'div', comme ma réponse originale (vous pouvez vérifier cela en inspectant l'élément dans Firefox ou Chome). Quoi que vous fassiez, j'espère que cela aide;) – benekastah

Merci encore d'avoir aidé un débutant comme moi – yerty

Javascript: ouvrir une nouvelle fenêtre sur onMouseOver & onMouseOut, mais seulement si new window onMouseOver = true

Répondre

Questions connexes