Solved

about DHTML

Posted on 2000-02-15
3
242 Views
Last Modified: 2010-04-09
hi...
please open this document in IE 4 OR 5.
im trying to do very simple dynamic menu in dhtml.
when i mouseover the image(about.gif) - i can see
that a submenu that contain 3 links is appear.
that's good but i dont know how to do that when i "mouseout"
from the submenu it will be invisible.
when im adding the mouseout feture to the image(about.gif)
then the submenu is gone and i cant go to link1...link2...link3
what to do?

<html>
<head>
<style>
#top{position:absolute ;left: 0 ;top: 0;font-size:13px}
#submenu1 {position:absolute ;left: 0 ;top: 31;font-size:13px;visibility:hidden}
</style>
<script>
function showsub(){
document.all.submenu1.style.visibility= "visible"
}
function hidesub(){
document.all.submenu1.style.visibility= "hidden"
}
</script>
<title>my firm</title>
<body bgcolor="white">
<div id="top">
<a href="" onmouseover="showsub()">
<img src="images/about.gif" border=0></a>
</div>
<div id="submenu1">
<table width=60 border=0 cellpadding=0 cellspacing=0><tr><td width=60 bgcolor="red">

<a href="link1.htm">link 1</a><br>
<a href="link2.htm">link 2</a><br>
<a href="link3.htm">link 3</a><br>
</a>
</tr></td></table>
</body>
</html>


0
Comment
Question by:eladr
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
xabi earned 70 total points
ID: 2526060
Here goes the code:

-------- 8< --------- 8< --------
<html>
<head>
<style>
#top{position:absolute ;left: 0 ;top: 0;font-size:13px}
#submenu1 {position:absolute ;left: 0 ;top: 31;font-size:13px;visibility:hidden}
</style>
<script>
function showsub(){
document.all.submenu1.style.visibility= "visible"
}
function hidesub(){
document.all.submenu1.style.visibility= "hidden"
}
</script>
<title>my firm</title>
<body bgcolor="white">
<div id="foo" onmouseover="showsub()" onmouseout="hidesub()">
 <div id="top">
  <img src="images/about.gif" border=0>
 </div>
 <div id="submenu1">
  <table width=60 border=0 cellpadding=0 cellspacing=0>
   <tr>
    <td width=60 bgcolor="red">
     <a href="link1.htm">link 1</a><br>
     <a href="link2.htm">link 2</a><br>
     <a href="link3.htm">link 3</a><br>
    </td>
   </td>
  </table>
 </div>
</div>
</body>
</html>
---------- 8< --------- 8< -----

add the onmouseover and onmouseout to a div containing images and the menu

xabi
0
 
LVL 8

Expert Comment

by:xabi
ID: 2526067
A typo:

..
..

     <a href="link3.htm">link 3</a><br>
    </td>
   </tr>
  </table>
..
..

ps: Take care about your </tr></td> and missing </div>
0
 
LVL 1

Author Comment

by:eladr
ID: 2527667
hi...
thanks...it works - got your point.
but...i add this lines,because i want this will work also in navigator:
-----------------------------------------------------------------------
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function showsub(menuNum){
if (ie4){
                        document.all.submenu1.style.visibility= "visible"
                  }

if (ns4){
                        document.layers.submenu1.visibility= "show"
                  }
}
function hidesub(menuNum){
if (ie4){
                        document.all.submenu1.style.visibility= "hidden"
                  }

if (ns4){
                        document.layers.submenu1.visibility= "hide"
                  }

}

-----------------------------------------------------------------------------
well...it's not working in netscape not because this few lines but
i think the netscape does'nt like the <div> inside the <div onmouseover...> (nested layers)
am i write?what is the solution?
i will give more points...
elad
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question