| | |
Creating a popup menu on mouse over
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Apr 2007
Posts: 3
Reputation:
Solved Threads: 0
I'm creating a website and I want to have a popup menu with additional links come up when a text image is moused over.
I'm alright with HTML, but I know that this can't be done in HTML and I assume it's Javascript that I would need to use. Can anyone help me or point me in the direction of some resources that could help?
I'm pretty rusty with web developement and I know almost nothing about javascript.
I'm alright with HTML, but I know that this can't be done in HTML and I assume it's Javascript that I would need to use. Can anyone help me or point me in the direction of some resources that could help?
I'm pretty rusty with web developement and I know almost nothing about javascript.
•
•
Join Date: Apr 2007
Posts: 24
Reputation:
Solved Threads: 0
You can create a new window using the window.open() funtion. This will help http://www.w3schools.com/htmldom/met_win_open.asp
•
•
•
•
You can create a new window using the window.open() funtion. This will help http://www.w3schools.com/htmldom/met_win_open.asp
You can make popup menus without any Javascript (using CSS)... but they only work well in those 'modern' browsers already mentioned.
If using Javascript, look at moving and hiding/showing some 'menu HTML', or if appropriate, creating such a menu dynamically..
The code I'm posting is gratuitously commented, and has been tested on Opera 9, Firefox 2, and IE6. It will let you assign different menus to multiple objects; but the menus don't disapear very cleanly... You can hack the Javascript around to do things like, alter the position of the popup relatively, so it appears 'from' the parent element rather than over it; or even at the position of the mouse exactly. You also might want to make the popups disapear automatically when the user mouses out of the vicinity of the popup... I'll leave that to you to research:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Simple PopupMenu</title> <style type="text/css"> /*Important style definition is 'position:absolute'. Means the element can be placed at an arbitrary position without affecting the flow of surrounding elements*/ .popup { position:absolute; border:solid 1px black; background-color:white; padding:4px; } </style> <script type="text/javascript"> //findPos function is from http://www.quirksmode.org/js/findpos.html; //where its workings are explained in more detail. function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft curtop = obj.offsetTop while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } } return [curleft,curtop]; } //Display a named menu, at the position of another object function display_menu(parent,named) { //get the named menu var menu_element = document.getElementById(named); //override the 'display:none;' style attribute menu_element.style.display = ""; //get the placement of the element that invoked the menu... var placement = findPos(parent); //...and put the menu there menu_element.style.left = placement[0] + "px"; menu_element.style.top = placement[1] + "px"; } //Hide a named menu function hide_menu(named) { //get the named menu var menu_element = document.getElementById(named); //hide it with a style attribute menu_element.style.display = "none"; } </script> </head> <body> <!--Define the menu's contents. It's important to put the display:none style attribute here rather than in a <style> block, because it can be overriden easily if it's assigned here--> <div class="popup" id="menu1" style="display:none;"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> <!--Hide the menu when the text (Close popup) is clicked--> <span onclick="hide_menu('menu1');">(Close popup)</span> </div> <!--Mouseovering on this element will show the menu with id 'menu1', at the position of {this}, that is this element--> <a href="#" onmouseover="display_menu(this,'menu1');">Popup on hover</a> <p> Other text here, should not be obscured on pops. </p> <p> Other text here, should not be obscured on pops. </p> <p> Other text here, should not be obscured on pops. </p> <a href="#" onmouseover="display_menu(this,'menu1')">Popup on hover</a> </body> </html>
As said, a similar effect is afforded much more gracefully using only HTML and CSS. The following example is tested to work in Opera 9 and Firefox 2, but DOES NOT WORK IN INTERNET EXPLORER 6. It uses the CSS 'next element' selector; which doesn't work in IE6 (nor does parent:hover child, strangely enough). This menu WILL go away automagically when the user mouses away from it; but, as said, won't work with old browsers...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>CSS PopupMenu</title> <style> div.popup { display:none; position:absolute; border:solid 1px black; padding:8px; background-color:white; } a.popup:hover + div.popup { display:block; } div.popup:hover { display:block; } </style> </head> <body> <a class="popup" href="#">Popup on hover</a> <div class="popup"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> <p> Other text here, should not be obscured on pops. </p> </body> </html>
Last edited by MattEvans; May 10th, 2007 at 7:28 pm. Reason: html codeblocks are well messy..
Plato forgot the nullahedron..
![]() |
Similar Threads
- popup menu on hover (HTML and CSS)
- searching a text and popup menu (Visual Basic 4 / 5 / 6)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: require urgent help
- Next Thread: Window Scroll Position
| Thread Tools | Search this Thread |
acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n






