Printable View
I like to create a web page similar to the following web page.
http://www.shakespeare-fishing.com/where/index.shtml
I know how to do most of the html and the dropdown combobox. I really like to know how they did the blue menu such as the PRODUCTS Menu and as you move your cursor down each selection, it highlights each selection. Is there a tutorial to help me with this?
I don't really know if this is an ASP question or a Javascript question.
Thanks
It's javascript.
It's very simple.
Mail me, I'll tell you... otherwise... you'll have to go through some looong procedure at htmlguru.com
I'm free right now. I'll tell you here, you can ask me if you run into probz.
First of all, in your style sheet, create
(just for example)Code:tr.brainz {
BORDER-RIGHT: #646464 2px solid; BORDER-TOP: #d2d2d2 2px solid; BORDER-LEFT: #d2d2d2 2px solid; CURSOR: hand; BORDER-BOTTOM: #646464 2px solid; BACKGROUND-COLOR: #c0c0c0; color: black; font-weight: bolder;}
tr.brainz2 {
BORDER-RIGHT: #646464 1px solid; BORDER-TOP:#d2d2d2 1px solid; BORDER-LEFT: #d2d2d2 1px solid; CURSOR: hand; COLOR: #ffffff; BORDER-BOTTOM: #646464 1px solid; color:white; background-color:red; cursor:hand; font-weight:bolder;}
now create a table
Code:<table border="1" width="130">
<tr class="brainz">
<td width="69">adsf</td>
<td width="47">saf</td>
</tr>
<tr class="brainz">
<td width="69">asfd</td>
<td width="47">sd</td>
</tr>
</table>
now u also gotta create a javascript function
Code:function chgBg(obj,state)
{
if (state == '1')
obj.className = 'brainz2';
else obj.className = 'brainz';
}
now let's go back and edit the table properties
replace each tr like this:
now u can manipulate this code, as u want.Code:<tr class="brainz" onMouseOver="javascript:chgBg(this,1);" onMouseOut="javascript:chgBg(this,0);" onClick="javascript:window.location.href='us/index.html';">
hope that helped, else mail me (check the profile)
Thanks for the information mendhak.
Is it correct that your script only highlight? If that is true, that is part of what I am looking for. I am also looking on how to create the menu too.
Thanks so much for you time.
Here is what I did with your script. Is it correct?
Code:<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE>
tr.brainz {
BORDER-RIGHT: #646464 2px solid;
BORDER-TOP: #d2d2d2 2px solid;
BORDER-LEFT: #d2d2d2 2px solid;
CURSOR: hand;
BORDER-BOTTOM: #646464 2px solid;
background-color: #c0c0c0;
color: black;
font-weight: bolder;}
tr.brainz2 {
BORDER-RIGHT: #646464 1px solid;
BORDER-TOP:#d2d2d2 1px solid;
BORDER-LEFT: #d2d2d2 1px solid;
CURSOR: hand;
COLOR: #ffffff;
BORDER-BOTTOM: #646464 1px solid;
color:white;
background-color:red;
cursor:hand;
font-weight:bolder;}
</STYLE>
<SCRIPT>
function chgBg(obj,state)
{
if (state == '1')
obj.className = 'brainz2';
else obj.className = 'brainz';
}
</SCRIPT>
</HEAD>
<BODY>
<table border="1" width="130">
<tr class="brainz" onMouseOver="javascript:chgBg(this,1);" onMouseOut="java script:chgBg(this,0);" onClick="java script:window.location.href='us/index.html';">
<td width="69">adsf</td>
<td width="47">saf</td>
</tr>
<tr class="brainz" onMouseOver="javascript:chgBg(this,1);" onMouseOut="java script:chgBg(this,0);" onClick="java script:window.location.href='us/index.html';">
<td width="69">asfd</td>
<td width="47">sd</td>
</tr>
</table>
</BODY>
</HTML>
you're welcome
yes
you're welcome
yes
Alternatively you can use this attached set of files that will achieve the same effect :) They are very good. as long as you don't use iFrames.
Hope this helps if you need it.
Chris