maddy007
asked on
Script for an onmouseover to bring up a submenu
I need a script to bring up a submenu of links. I like how it alleviates the problem of clicking on a link only to get to another list of links. My idea for the format of the page would be to have a table with 3 columns. The left column would have the basic menu. The right column would have a slideshow of pictures. The middle column would have a faint background image and then when someone mouses over a basic menu item, another sub menu of clickable links would come into this cell of the table. Also, can the submenu actually be an image map?
ASKER
These tutorials are on the right track of what I want, but the sub menu that pops up does not seem to have the ability to dictate where it will pop up. When the sub menu pops up, I want it to look like it belonged there all along... in the center of a table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
<!--
var content=new Array()
//change the array below to the links associated with menu links Expand or contract the array, depending on how many menus you have
content[0]='<b>menu1</b><b
content[1]='<b>menu2</b><b
content[2]='<b>menu3</b><b
function recreate(){
window.location.reload()
}
function recreate2(){
if (document.layers){
appear()
setTimeout("window.onresiz
}
}
function changeMenu(whichMenu){
if (document.all||document.ge
cross_el=document.getEleme
cross_el.innerHTML=whichMe
}
else if (document.layers){
document.first.document.se
document.first.document.se
}
}
function appear(){
document.first.visibility=
}
window.onload=recreate2
//-->
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="scriptmenu" style="line-height:20px"><
and Navigation Systems</a><br>
<a href="#" onMouseover="changeMenu(co
effects</a><br>
<a href="#" onMouseover="changeMenu(co
</div>
</td>
<td>
images
</td>
<td>
<ilayer id="first" width="200" height="200" visibility="hide">
<layer id="second" width="200" height="200">
<div id="descriptions" align="left">
<!--Change below to default menu-->
<b>menu1</b><br><a href="link1.html">link1</a
<!--Stop editting-->
</div>
</layer>
</ilayer>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<script>
<!--
var content=new Array()
//change the array below to the links associated with menu links Expand or contract the array, depending on how many menus you have
content[0]='<b>menu1</b><b
content[1]='<b>menu2</b><b
content[2]='<b>menu3</b><b
function recreate(){
window.location.reload()
}
function recreate2(){
if (document.layers){
appear()
setTimeout("window.onresiz
}
}
function changeMenu(whichMenu){
if (document.all||document.ge
cross_el=document.getEleme
cross_el.innerHTML=whichMe
}
else if (document.layers){
document.first.document.se
document.first.document.se
}
}
function appear(){
document.first.visibility=
}
window.onload=recreate2
//-->
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="scriptmenu" style="line-height:20px"><
and Navigation Systems</a><br>
<a href="#" onMouseover="changeMenu(co
effects</a><br>
<a href="#" onMouseover="changeMenu(co
</div>
</td>
<td>
images
</td>
<td>
<ilayer id="first" width="200" height="200" visibility="hide">
<layer id="second" width="200" height="200">
<div id="descriptions" align="left">
<!--Change below to default menu-->
<b>menu1</b><br><a href="link1.html">link1</a
<!--Stop editting-->
</div>
</layer>
</ilayer>
</td>
</tr>
</table>
</body>
</html>
and yes, the submenu could be an image map. simply copy its html code into one of the variables in the array.
ASKER
I must be stupid because the script you wrote for me doesn't seem to work. Nothing happens on mouseover. I'm sure I'm doing something wrong. I copied and pasted it into a html editing program, saved it and then opened it with IE 5.5.
Okay. Once I get it to work... if I ever do, I'm glad to know you can use an image map because that would be very nice.
Okay. Once I get it to work... if I ever do, I'm glad to know you can use an image map because that would be very nice.
make sure that it's not working. the only difference between the menus is the title of each, MENU1, MENU2, MENU3.
it should work for you.
it should work for you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks,
I should be able to apply this to my page. Wish me luck.
maddy
I should be able to apply this to my page. Wish me luck.
maddy
hey, glad I could help! normally, I am the one getting helped in this category but I understood what you wanted and had a few examples to pull from.
good luck!
good luck!
http://www.webreference.com/dhtml/column42/index.html
nzjonboy