Solved

about DHTML

Posted on 2000-02-15
3
258 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

734 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