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>

javascript window onmouseover onmouseout
person yerty    schedule 21.07.2011    source источник
comment
Всплывающее окно для причудливой всплывающей подсказки? уй! Блокировщики всплывающих окон заблокируют это! Используйте всплывающие подсказки на базе Ajax.   -  person epascarello    schedule 21.07.2011
comment
Я еще не знаком с Ajax. Тем не менее, это больше, чем причудливая подсказка, и она предоставит полезную информацию для моего личного использования. Если это невозможно сделать в Javascript, я изучу и буду использовать Ajax, но я бы предпочел решение в javascript.   -  person yerty    schedule 21.07.2011

Ответы (1)


arrow_upward
1
arrow_downward

Я бы рекомендовал не использовать новое окно браузера для этой задачи. Попробуйте что-то вроде этого:

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 (которое, очевидно, закрывает окно). Я полагаю, у вас была бы такая же проблема и с настоящим окном.

person benekastah    schedule 21.07.2011
comment
Спасибо за ваше предложение. Раньше у меня было что-то похожее на ваш код, но мне очень нужно всплывающее окно для моей базы данных фильмов. Я пытался сделать что-то похожее на всплывающее окно Netflix, когда вы наводите курсор на картинку из фильма. Еще раз спасибо за попытку помочь. - person yerty; 22.07.2011
comment
Отредактировал ответ, чтобы включить способ сделать это с помощью окна. К вашему сведению, Netflix не использует настоящие окна для того, о чем вы говорите. Они используют div, как и мой первоначальный ответ (вы можете проверить это, проверив элемент в Firefox или Chome). Что бы вы ни делали, я надеюсь, что это поможет;) - person benekastah; 22.07.2011
comment
Еще раз спасибо за помощь такому новичку, как я - person yerty; 22.07.2011
comment
Все в чем-то новички :) Без проблем. - person benekastah; 23.07.2011