Javascript: open & close new window on image's onMouseOver & onMouseOut, but only if new window onMouseOver = true -
thank helping me javascripting problems. current problem need open & close new window on image's onmouseover & onmouseout, respectively, if new window onmouseover == true don't want new window close.
i sure there simple solution, can't seem figure out way cancel image's onmouseout="closedetails();" if user hovers on new window. below of code dealing with. in advance help.
<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"> // opens movie details pop-up after // half second interval. function windowdelay(thatimg) { winopentimer = window.settimeout(function() {opendetails(thatimg);}, 2000); } // function open // new window when mouse moved on image function opendetails(thatimg) { // creates new window , uses hovered image name window // name can used in window's javascript newwindow = open("", thatimg.name,"width=400,height=500,left=410,top=210"); // open new document newwindow.document.open(); // text of new document // replace " ' or \" or document.write statements 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("... other html...."); newwindow.document.write("</body></html>"); // close document newwindow.document.close(); } // function call // closewindow() after 2 seconds // when mouse moved off image. function closedetails() { winclosetimer = window.settimeout("closewindow();", 2000); } // function closes pop-up window // , turns off window timers function closewindow() { // if popuphover == true not want // window close if(popuphover == false) { clearinterval(winopentimer); clearinterval(winclosetimer); newwindow.close(); } } function popupdetails() { // used prevent details window closing popuphover = true; // below other javascript code... } </script>
i recommend against using new browser window task. try this:
var popup = { open = function () { if (this.element == null) { // create new div element our popup , store in popup object this.element = document.createelement('div'); this.element.id = "mypopup"; // don't need full html document here. stuff putting in <body> tag before this.element.innerhtml = "<your>html</here>"; // bare minimum styles make work popup. better in stylesheet this.element.style = "position: absolute; top: 50px; right: 50px; width: 300px; height: 300px; background-color: #fff;"; } // add <body> tag document.body.appendchild(this.element); // call whatever setup functions calling before popupdetails(); }, close = function () { // rid of popup document.body.removechild(this.element); // other code want } }; // element want trigger popup var hoveroverme = document.getelementbyid("hoveroverme"); // set our popup open , close methods proper events hoveroverme.onmouseover = popup.open; hoveroverme.onmouseout = popup.close; that should it. it's easier control new browser window. want tweak css yourself.
edit:
here instructions actual window. reiterate, using actual window not best way accomplish task. stylized div tag window better because offers more control, standardized functionality across browsers. however, if must use window, here is:
// can use many principles example above, i'll give quick version var popup; var hoveroverme = document.getelementbyid("hoveroverme"); hoveroverme.onmouseover = function () { popup = window.open("path_to_content", "popup"); }; hoveroverme.onmouseout = function () { popup.close(); }; it works, not (imho). if user has settings such new windows open in new tabs (as do), tab open up. javascript has no control on that. in firefox, new tab open , gain focus, @ point closes because hoveroverme had onmouseout event fired (which closes window). imagine you'd have same problem actual window, too.
Comments
Post a Comment