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

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.

<span style="background: url(background.gif) left no-repeat;"><a href="#">link text</a></span>

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

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:


Newly Edited Code:

Again, thanks in advance
- Eric

<span style="background: url("images/btn_default.gif") left no-repeat;" name="home_Img">

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?

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?

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

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:
<style type="text/css">
<!--
.menu a {
background: #ffffff url(background_norm.jpg) left no-repeat;
}
.menu a:hover {
background: #ffffff url(background_hover.jpg) left no-repeat;
}
.menu a:active {
background: #ffffff url(background_active.jpg) left no-repeat;
}
-->
</style>

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.

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

Why is the tag coded as follows:


Instead of this: