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'd get a book on JavaScript and read it. I used "JavaScript Demystified" by Jim Keogh.
You can create a new window using the window.open() funtion. This will help http://www.w3schools.com/htmldom/met_win_open.asp
Just go to the library and pick up a Javascript book.
You can use the dreamweaver from macromedia. In there you can find premade java-scripts that will do your job as well. :)
You can create a new window using the window.open() funtion. This will help http://www.w3schools.com/htmldom/met_win_open.asp
Using spawned windows as popup menus is a naff approach. Alot of 'modern' browsers block out popups, or put them behind the active window. Also, you'd have to be careful to avoid multiple window.opens every time the user moves the mouse...
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:
<!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...
<!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>
Can u give me same functionality for gridview elements
Please its urgent!
I tryed but it shows allways first elmets data as popup and one more thing grid view have bounded coulumns.
Please Help
thANKS
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.