Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

about DHTML

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

971 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