Swap text over an image?

Okay, I'm confused about behaviors like Swap Image and Swap Nav-bar image. I
have a nav bar, and it is one solid graphic with several different buttons (its
just an image, but certain areas have the button image). If I just want the
text on the button to light up when that area is moused over should I:

(A) Make the entire nav bar swap to one of 7 nav bars, each one with one
button text highlighted based on a hotspot mouse over I put over each button
area

(B) Somehow place text in DW on top of the image for the buttons?

(C) Your own suggestions

Any of those and more, although the 7 image thing is not my favorite. I
rather like the pure CSS rollovers where you have both the up and the down
images all lined up in the same graphic, e.g.,

button1up button2up button3up button4up
button1down button2down button3down button4down

and then you use that graphic as the background image for all your buttons'
a tags, with CSS position being used to make the right button label appear.
Then your hover state justs shifts the background position.

You can see this in action in the rollovers here (although not as a single
graphic) - http://www.midwestespresso.com

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Bradley Williams" <webforumsuser (AT) macromedia (DOT) com> wrote

Okay, I'm confused about behaviors like Swap Image and Swap Nav-bar image.
I
have a nav bar, and it is one solid graphic with several different buttons
(its
just an image, but certain areas have the button image). If I just want
the
text on the button to light up when that area is moused over should I:

(A) Make the entire nav bar swap to one of 7 nav bars, each one with one
button text highlighted based on a hotspot mouse over I put over each
button
area

(B) Somehow place text in DW on top of the image for the buttons?

(C) Your own suggestions

Please check this URL:

www.braveworks.org

With this slicing scheme (though the graphic isn't finished yet), it seems
difficult to apply any method except swapping the whole bar each time one of
the slices (WHICH WILL BE LABELED THIS TIME) is scrolled over. When I put text
into the slices, I want the text to glow when moused over. See what I mean?

Also, how can I use CSS-P to make the purple column reach the bottom. I know
I can set the left margin of the main area, but when I go to center the wrapper
in the middle of the page, it somehow stops working?

Here's the CSS

/* CSS Document */

html, body, #wrapper{
background-color: #fff;
margin:0px;
padding:0px;
}

#wrapper{
width:770px;
text-align:center;
}

#bw {
padding:0;
}

#info {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #fff;
background: #000;
text-align:center;
padding: 3px;
height:35px;
}

#main {
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#up {
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #f00;
background: #f0f;
text-align: center;
margin-right:20px;
padding: 3px;
float: left;
width: 100px;
overflow:visible;
}

#ft {
text-align: center;
border: 1px solid #000000;
font: 9px Verdana, Arial, Helvetica, sans-serif;
background-color:#999;
}
h1 {
font: normal 24px Georgia, "Times New Roman", Times, serif;
padding: 7px;
text-align: center;
margin: 0;
}
#main p {
font: 10px Verdana, Arial, Helvetica, sans-serif;
padding-top:0;
padding-bottom:7px;
margin:0;
padding-right:20px;
}