dilemma: css or js navi, could use either, see pros/cons to both for my client

LockedNLoaded · #1 (**permalink**) 03-30-09, 02:39 PM

okay... here is the dilemma.

I have a client that has a top navi bar. The navi bar is made up of images that have a very specific font style text on them. So, using just html text (Arial, Verdana, etc) to trigger the background image is not an option here. period. don't bother asking or commenting, it is set in stone.

So, I could still do it in CSS and make the buttons backgrounds and just swap the background image, with its text on it. BUT, if I do this, I cannot have ALT tags or any html text in place if an issue or for search engines. Sure, I can cut out all the image preloading, ditch the scripts needed to run roll-overs, run the entire navi via CSS, I get a 5 button navi bar to run with just 5 images, and I use current CSS. Many benefits, but a key negative since no ALT tag or html text in this particular case.

Of course, I could also do this by good old js with the all those bulky additional image preload calls in the <body>, the scripts to run roll-overs, 10 buttons (an 'on' and 'off' state) for a 5 button navi, but I get to use ALT tags at least. But is that really reason enough to use it.

I feel like since the customer MUST have their font style used in the navi buttons, meaning the text and buttons are 1, I loose part of the benefit of a css navi.. that is, I could have HTML text in the page AND just 1 generic background image can be the on and off state - which is a real beauty of css navi, but not in this case. And, with css navi, I get no ALT tags in this case and since this navi must use buttons with their font style text on them, there is no text to see if an issue arises (since no ALT tag and no HTML text) or for search engines as the entire thing is image based. BUT, you also want to use more current technology like CSS, cut out the preloads, cut out the scripting to run roll-overs, use 5 images rather than 10..

do you see the dilemma?? not sure what best to do??

wirehopper · #2 (**permalink**) 04-02-09, 06:41 PM

Many sites place an HTML version of menu navigation at the bottom of the screen.

I would use CSS, with links, and title tags.

Not tested.

Code:

a.menu
{
width:100px;
height:25px;
background: transparent url(image.gif) repeat-x;
}
a#aPage:hover /* Not sure on the syntax */
{
background-image: url(page_image.gif);
}

<a href="page.html" class="menu" title="Page" id="aPage"></a>

You could also look into 'sprites' - placing all the navigation images in a single image (like a bar), then adjust the offset point.

http://css-tricks.com/css-sprites-wh...w-to-use-them/
http://www.askapache.com/css/css-bac...ge-sprite.html