cmgmyr Posted September 3, 2007 Share Posted September 3, 2007 I want to have a script that when you rollover an image it loads a page into a "pop-up". Kind of what Netflix does here: http://www.netflix.com/BrowseSelection?lnkctr=nmhbs. But I want to be able to move the mouse onto this pop up so that the user can click on elements in it (this will also have ajax elements in it). I uploaded an example of what I'm looking for (I just made it in photoshop). Does anyone know a tutorial that I can use, or an example? I've been looking for a while but I haven't found something that does what I want it to. Thanks! [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
ashishmat1979 Posted September 4, 2007 Share Posted September 4, 2007 Try this link it is a nice library for popup utility: http://www.bosrup.com/web/overlib/?Features Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted September 5, 2007 Author Share Posted September 5, 2007 Thanks for the link. I checked it out, but I think it's going to be way too bulky for the application. Between the javascript includes and the html that I would have to include in the link...it's a lot of code. Thanks again though! Any other ideas? Quote Link to comment Share on other sites More sharing options...
techtheatre Posted September 6, 2007 Share Posted September 6, 2007 give this a shot...(NOTE: I did not create this code, it was given to me in response to a similar post that i made on another forum at: http://www.webmasterworld.com/css/3337813.htm) <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>test page</title> <script type="text/javascript" language="JavaScript"> <!-- Copyright 2006 Bontrager Connection, LLC var cX = 0; var cY = 0; function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;} function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;} if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; } else { document.onmousemove = UpdateCursorPosition; } function AssignPosition(d) { d.style.left = (cX+10) + "px"; d.style.top = (cY+10) + "px"; } function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } var dd = document.getElementById(d); AssignPosition(dd); dd.style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } var dd = document.getElementById(d); AssignPosition(dd); if(dd.style.display == "none") { dd.style.display = "block"; } else { dd.style.display = "none"; } } //--> </script> <style type="text/css"> div.FAQ { color: #336633; font-weight: bold; font-size: 12px; font-family: Arial, sans-serif; background-color: #ffffcc; text-align: center; padding: 10px; border: solid 1px; position: absolute; display: none } #UNIQUEID { background-color: #ffc; position: absolute; display: none } </style> </head> <body bgcolor="#ffffff"> <p> blah blah blah... </p> <p> blah blah blah... </p> <p> blah blah blah... </p> <p> blah blah blah... </p> <a onmouseover="ShowContent('UNIQUEID'); return true;" onmouseout="HideContent('UNIQUEID'); return true;" href="#" target="_self">LINK</a> <div id="UNIQUEID" class="FAQ">IMAGE OR TEXT HERE<br> </div> <p></p> </body> </html> hope this helps. Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted September 6, 2007 Author Share Posted September 6, 2007 hmmm, very interesting. Close too. But the problem that I'm seeing with a lot of scripts is that I can't "use" the pop up. Meaning...I need to be able to put html, images, text, links, pics, anything else in that "pop up", I also need to be able to move the mouse over onto it so that I can use the elements in it. Thanks for the script though! Quote Link to comment Share on other sites More sharing options...
ScotDiddle Posted September 12, 2007 Share Posted September 12, 2007 Chris, I'd give overLib another look. It requires one script and one div statement. Everything inside of the return overLib('') quotes is simply html ( which can include calls to other javascript ) AND can be define as a Javascript Var. Here is overLib in a simple form... Download the overLib package, and move overlib.js to the javascript folder ( or change the pointer in my example below.) You will see all is well, and really very simple. Scot L. Diddle, Richmond va <html> <head> <title>overLIB test</title> <link type="text/css" rel="stylesheet" href="css/default.css"> <script language="JavaScript" src="javascript/overlib.js"></script> </head> <body> <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div> <a href="#" class="mainmenu" onmouseover="return overlib('<a style=\'margin-left: 85%;\' href=\'javascript:void();\' onmouseOver=\'return nd();\' >Close</a><br /><br /><a href=www.somesite.com>Make overLIB even more powerful.</a><br /><br > This remains sticky until you mouseOver another overLib enabled link (or mouseOver the Close Link above...)', STICKY);" onmouseout="return nd();">overLib Test Link</a><br><br> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.