Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
Hi Jaap (and anyone who read this),
From your previous example abt the drop down menu, when the user point the mouse to the table cell, the drop down menu will come up with the colour that we specified in the CSS rules, right ? What do i need to change in the JavaScript so that when the user point to that cell, 2 things will happen:
-the cell will change its color
-the drop down menu will come up
(if you have not read my prev posting, just have a look at: www.national.com.au to have some idea what i'm talking about. It's about the nav bar that has a drop down menu if the user points his mouse on it).
If you already have that in mind, please let me know. I'm currently trying it. If you don't know, thats fine, i will find it out sooner or later.Best regards,
Hi BrIan,
sorry for the long waiting, I don't look on this forum every day. I took another look to the script, and have edited it for you. This is as good as i can get it for now (I'm 13 years old).
As I am building my (first) own site, i knew where to find the scripts you needed. And merged them together to get the desired result.
The site www.national.com.au uses gif files in the top of the menu, and some .js or .css files. I didn't :PSo here comes the new script.
<html>
<head>
<PRE>
<style type="text/css">
a:link {font= "Verdana, Arial, Helvetica, sans-serif" ; color="black"; text-decoration: none; size: 2}
a:visited {font= "Verdana, Arial, Helvetica, sans-serif" ; color="black"; text-decoration: none; size: 2}
a:hover {font= "Verdana, Arial, Helvetica, sans-serif" ; color="black"; text-decoration: none; size: 2}
</style><style>
body{font-family:verdana;}
table{font-size:80%;background:black}
A.menulink {display: block;width="100%"}
a{color:black;text-decoration:none;font:bold}
a:hover{color:orange}
td.menu0{background:red}
td.menu1{background:white}
td.menu2{background:blue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script language="JavaScript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
<title>This page;
<tr bgcolor="red">
<td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')">
<a href="index.htm">Site 1</a><br />
<table class="menu" id="site1" width="100%">
<tr><td class="menu0" onmouseout="style.backgroundColor='red'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: red"><a href="pag1.htm">something</a></td></tr>
<tr><td class="menu0" onmouseout="style.backgroundColor='red'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: red"><a href="pag2.htm">something</a></td></tr>
<tr><td class="menu0" onmouseout="style.backgroundColor='red'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: red"><a href="pag3.htm">something</a></td></tr>
<tr><td class="menu0" onmouseout="style.backgroundColor='red'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: red"><a href="pag4.htm">hi</a></td></tr>
<tr><td class="menu0" onmouseout="style.backgroundColor='red'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: red"><a href="pag5.htm">bye</a></td></tr>
</table>
</td><td bgcolor="white" onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')">
<a href="http://www.site2.nl">Site 2;<td class="menu1" onmouseout="style.backgroundColor='white'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: white"><a href="http://www.your-domain.ext/pag1.htm">Who</a></td></tr>
<tr><td class="menu1" onmouseout="style.backgroundColor='white'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: white"><a href="http://www.site2.nl/pag2.htm">What</a></td></tr>
<tr><td class="menu1" onmouseout="style.backgroundColor='white'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: white"><a href="http://www.site2.nl/pag3.htm">Where</a></td></tr>
<tr><td class="menu1" onmouseout="style.backgroundColor='white'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: white"><a href="http://www.site2.nl/pag4.htm">Why</a></td></tr>
<tr><td class="menu1" onmouseout="style.backgroundColor='white'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: white"><a href="http://www.site2.nl/pag5.htm">When</a></td></tr>
</table>
</td><td bgcolor="blue" onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')">
<a href="http://www.site3.nl">Site 3;<td class="menu2" onmouseout="style.backgroundColor='blue'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: blue"><a href="http://www.site3.nl/pag1.htm">Who</a></td></tr>
<tr><td class="menu2" onmouseout="style.backgroundColor='blue'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: blue"><a href="http://www.site3.nl/pag2.htm">What</a></td></tr>
<tr><td class="menu2" onmouseout="style.backgroundColor='blue'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: blue"><a href="http://www.site3.nl/pag3.htm">Where</a></td></tr>
<tr><td class="menu2" onmouseout="style.backgroundColor='blue'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: blue"><a href="http://www.site3.nl/pag4.htm">Why</a></td></tr>
<tr><td class="menu2" onmouseout="style.backgroundColor='blue'; "
onmouseover="style.backgroundColor='yellow'; " style="BACKGROUND-COLOR: blue"><a href="http://www.site3.nl/pag5.htm">When</a></td></tr>
</table>
</td>
</table>
</PRE><P><P><P>
</html>
Greetz from Jaap
0 
 |
 |
 |
This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |
