Help with dynamic menu

[ecashwell]

I'm creating a dynamic dropdown menu for my website. All information will be stored in a database. None of the images will have names on them. Ex: Home, Software, Support, ... These names will be found in a database along with their sub-menus, the drop downs. I have the whole thing created, statically, right now. Once I'm done with the static version I'm going to cut it all up and turn it into ASP.NET classes and such so that all data populated on each page will be generated dynamically from a database.

*** See attached screen shot

Wow... Now to my question which is probably very simple but I'm pretty green when it comes to HTML, Java Script, and CSS. My menus are extremely small gifs and I want to place a layer on top the image with the name of that button. Ex: Home, Software, Support, Contact Us, ... What is the easiest way to accomplish this and if I could get a simple example I would greatly appreciate it.

As always, thanks in advance.
- Eric

[DaveSW]

for your second query it sounds like you might be better off using a css background for the image. I've used a span for the example below, but it applies whether you use divs, a list, tables, etc.

link text

[ecashwell]

Thanks...

I would place this span tag inplace of the img tag correct?

Is there a good source on the web which explains all the in's and out's of CSS, SPAN,and DIV tags? - Like I said I'm pretty green.

- Eric

[ecashwell]

Could you hold my hand for just a second? I cut and pasted your code snippet and replaced my image tag with your span tag. See attachment for new screen shot. The image no longer displays. Could you please assist?

Original Code:

<TD colSpan="2"><A onmouseover="MenuOver(this,'home')" onmouseout="MenuOut(this,'home')" href="http://www.derivetech.us/"><IMG src="images/btn_default.gif" border="0" name="home_Img"></A>

Newly Edited Code:

<TD colSpan="2"><A onmouseover="MenuOver(this,'home')" onmouseout="MenuOut(this,'home')" href="http://www.derivetech.us/"><span style="background: url("images/btn_default.gif") name="home_Img" left no-repeat;"><a href="#">Home</a></span></A>

Again, thanks in advance
- Eric

[DaveSW]

The name thing shouldn't be in your style declaration.

Also do you need this name thing? I assume it's related to a javascript funtion?

[DaveSW]

can you describe the rollover effect you want to create?
check out my menu things: www.webdevfaqs.com/css.php and scroll down to the menu examples.

I'm currently writing a simple tutorial set on css/divs/basic web design with css, but it's not finished yet. I can show you what's there and write the rest quickly if you like? ;)

[ecashwell]

I pass objects to move my images around. I send the name of the object to my JS function and then, simply put, I set the scr = new image path. It works very smooth and uses very little java script code. I would think that the SPAN would work as long as I can name the SPAN object.

The rollover effect:
Static label which is the name of the button: Home, Software, Products, Contact Us, ...
Under this label I would like to have an image which has a rollover event and click event.
The rollover event replaces the image with a new image and the click event would take you to the desired page.

Hope this helps.
- Eric

[DaveSW]

in that case what I would suggest is using css menu hovers.

if we assume your menu code is all within a div classed as menu.

In the head section of your document:

you might also want to use display: block and set widths and heights on all of those:
.menu a {
background: #ffffff url(background_norm.jpg) left no-repeat;
display: block;
height: 20px;
width: 150px;
}

Does that help at all? You can also set names on the a tags.

[ecashwell]

Wow... I did not know you could do that with CSS. How would I make the call from the body to the STYLE section?

Are the CSS tags platform independent? A few years ago I produced a website for a client and all of the menus were coded using layers in JavaScript. I had a very painful experience with the cross platform issue.

- Eric

[DaveSW]

css does not need to be called. Because that's in the head of the document, any hyperlink ('a' tag) found within an element with a class of class1, will have these properties.

The complexity of the stuff you do inside the a tags will affect the cross browser capabilities. Netscape 4 supports basic color changes, but I'm not sure about images. IE5 upwards supports all of the stuff above, as does netscape 5 (I believe).

Stuff like this menu http://www.webdevfaqs.com/cssmenus/ppc/ work fairly well in IE5+.

[ecashwell]

Why is the tag coded as follows:

background: #ffffff url(background_norm.jpg) left no-repeat;

Instead of this:

background: #ffffff; url("background_norm.jpg"); left no-repeat;

[DaveSW]

looks like a typo actually. the ";" tells the computer it's the end of the line, so in that case anything after the basic color would be ignored.

[ecashwell]

What about when I pass the image path string, do I need quotes around it?

[DaveSW]

you can use them if you want to, but you don't need them. However if you're using inline styles (i.e. then you shouldn't use a double quote around the filename or the computer may get confused and think it's reached the end of the style tag.

[ecashwell]

Awesome, thank you very much for the help.

I'm going to sit down and play for a bit and see how all of this stuff works.

I'll get back with you if I gum it all up.

- Eric

[DaveSW]

sure thing ;)

[ecashwell]

All gummed up....

This is not working. Can you see why?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>menu..</title>
		<STYLE type="text/css">
			.menu a {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:hover {
				background: #ffffff url(images/btn_hot.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:active {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
		</STYLE>
	</head>
	<body>
		<a>Home</a>
	</body>
</html>

[DaveSW]

yes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>menu..</title>
		<STYLE type="text/css">
			.menu a {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:hover {
				background: #ffffff url(images/btn_hot.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:active {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
		</STYLE>
	</head>
	<body>
		<div class="menu"><a>Home</a></div>
	</body>
</html>

Note the div around the a.

Also.menu a {
}
this means it only applys to "a" elements within an element with a class of menu. Otherwise every single link on the page would have the images in the background...

Does that help?

[ecashwell]

I see...

... Humm, I'm not getting the rollover action.

Any thoughts?

[DaveSW]

zip your folder and send it to me.

my first thoughts include:
dimensions on the hyperlinks.
image paths?