I really need help on this. Is there a tutorial?

**Hawk** · Mar 2nd, 2002, 07:51 AM

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

**mendhak** · Mar 2nd, 2002, 08:44 AM

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

**mendhak** · Mar 2nd, 2002, 11:53 AM

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

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;}

(just for example)

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:

Code:

<tr class="brainz" onMouseOver="javascript:chgBg(this,1);" onMouseOut="javascript:chgBg(this,0);" onClick="javascript:window.location.href='us/index.html';">

now u can manipulate this code, as u want.

hope that helped, else mail me (check the profile)

**Hawk** · Mar 2nd, 2002, 02:32 PM

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>

**mendhak** · Mar 4th, 2002, 12:33 AM

you're welcome

yes

you're welcome

yes

**chrismitchell** · Mar 4th, 2002, 11:01 AM

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

Thread: I really need help on this. Is there a tutorial?

Thread Tools

Display

I really need help on this. Is there a tutorial?

Posting Permissions