[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

about DHTML

Posted on 2000-02-15
3
Medium Priority
?
270 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 280 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

607 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