Solved

about DHTML

Posted on 2000-02-15
3
245 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

829 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