Navbar Image Rollover using CSS

Greetings,

I'm attempting to make a simple horizontal navbar with three image links,
and with those images replaced on hover and active... and I'm not sure of
the proper CSS to do this, though I've tried unsuccessfully.

This is the site: www.sunbadgeco.com/sunmetal/index.htm

Here's my simple centered navbar with extraneous (alt) coding removed:
<div id="navmain">

<a href="artists.htm"><img src="images/artists_inactive.jpg" border="0"
width="148" height="35"></a>
<img src="images/spacergraphic.gif" width="55" height="35">
<a href="contact.htm"><img src="images/contact_inactive.jpg" border="0"
width="163" height="35"></a>
<img src="images/spacergraphic.gif" width="55" height="35">
<a href="about.htm"><img src="images/about_inactive.jpg" border="0"
width="90" height="35"></a>

</div>

I'd like each link image named "_inactive.jpg" to be swapped with the same
size "_active.jpg" when hovered over. The lights behind the text are
supposed to go from dim to bright using this method. Any help would be
greatly appreciated.

My navmain CSS follows:
#navmain {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}

"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote:

I'm attempting to make a simple horizontal navbar with three image links,
and with those images replaced on hover and active...

and on focus as well?

and I'm not sure of
the proper CSS to do this, though I've tried unsuccessfully.

CSS (as supported by current browsers and especially IE) can only set
background images.

This is the site: www.sunbadgeco.com/sunmetal/index.htm

Oh dear:
http://validator.w3.org/check?uri=ht...etal/index.htm

Here's my simple centered navbar with extraneous (alt) coding removed:

alt is _never_ extraneous. ;-)

div id="navmain"
a href="artists.htm"><img src="images/artists_inactive.jpg" border="0"
width="148" height="35"></a
img src="images/spacergraphic.gif" width="55" height="35"
a href="contact.htm"><img src="images/contact_inactive.jpg" border="0"
width="163" height="35"></a
img src="images/spacergraphic.gif" width="55" height="35"
a href="about.htm"><img src="images/about_inactive.jpg" border="0"
width="90" height="35"></a
/div

I'd like each link image named "_inactive.jpg" to be swapped with the same
size "_active.jpg" when hovered over. The lights behind the text are
supposed to go from dim to bright using this method. Any help would be
greatly appreciated.

My navmain CSS follows:
#navmain {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}

Either make the images background images and change them via CSS, or
change the foreground images with JavaScript.

Steve


--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

"Steve Pugh" <steve (AT) pugh (DOT) net> wrote

"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote:

I'm attempting to make a simple horizontal navbar with three image links,
and with those images replaced on hover and active...

and on focus as well?

er... hmm? Yes, I have lots to learn.

and I'm not sure of
the proper CSS to do this, though I've tried unsuccessfully.

CSS (as supported by current browsers and especially IE) can only set
background images.

This is the site: www.sunbadgeco.com/sunmetal/index.htm

Oh dear:

http://validator.w3.org/check?uri=ht...nmetal/index.h

tm

Here's my simple centered navbar with extraneous (alt) coding removed:

It's my first attempt at completely XHTML and the site's not live yet. Not
to mention it's my first attempt at a completely CSS driven site. It will be
fixed

div id="navmain"
a href="artists.htm"><img src="images/artists_inactive.jpg" border="0"
width="148" height="35"></a
img src="images/spacergraphic.gif" width="55" height="35"
a href="contact.htm"><img src="images/contact_inactive.jpg" border="0"
width="163" height="35"></a
img src="images/spacergraphic.gif" width="55" height="35"
a href="about.htm"><img src="images/about_inactive.jpg" border="0"
width="90" height="35"></a
/div

I'd like each link image named "_inactive.jpg" to be swapped with the
same
size "_active.jpg" when hovered over. The lights behind the text are
supposed to go from dim to bright using this method. Any help would be
greatly appreciated.

My navmain CSS follows:
#navmain {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}

Either make the images background images and change them via CSS, or
change the foreground images with JavaScript.

Sounds like good advice. Can you give a brief example using only CSS?

"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote in
message newsU5vc.643847$Ig.21454 (AT) pd7tw2no (DOT) ..

"Steve Pugh" <steve (AT) pugh (DOT) net> wrote in message
news:jjopb0pt43n42blmb9qbpbfk74t31h4nhm (AT) 4ax (DOT) com...
"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote:

I'm attempting to make a simple horizontal navbar with three image
links,
and with those images replaced on hover and active...

and on focus as well?

er... hmm? Yes, I have lots to learn.

and I'm not sure of
the proper CSS to do this, though I've tried unsuccessfully.

CSS (as supported by current browsers and especially IE) can only set
background images.

This is the site: www.sunbadgeco.com/sunmetal/index.htm

Oh dear:


http://validator.w3.org/check?uri=ht...nmetal/index.h
tm

Here's my simple centered navbar with extraneous (alt) coding removed:

It's my first attempt at completely XHTML and the site's not live yet. Not
to mention it's my first attempt at a completely CSS driven site. It will
be
fixed

All fixed.

div id="navmain"
a href="artists.htm"><img src="images/artists_inactive.jpg" border="0"
width="148" height="35"></a
img src="images/spacergraphic.gif" width="55" height="35"
a href="contact.htm"><img src="images/contact_inactive.jpg" border="0"
width="163" height="35"></a
img src="images/spacergraphic.gif" width="55" height="35"
a href="about.htm"><img src="images/about_inactive.jpg" border="0"
width="90" height="35"></a
/div

I'd like each link image named "_inactive.jpg" to be swapped with the
same
size "_active.jpg" when hovered over. The lights behind the text are
supposed to go from dim to bright using this method. Any help would be
greatly appreciated.

My navmain CSS follows:
#navmain {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}

Either make the images background images and change them via CSS, or
change the foreground images with JavaScript.

Sounds like good advice. Can you give a brief example using only CSS?

"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote:

"Steve Pugh" <steve (AT) pugh (DOT) net> wrote in message
news:jjopb0pt43n42blmb9qbpbfk74t31h4nhm (AT) 4ax (DOT) com...

Either make the images background images and change them via CSS, or
change the foreground images with JavaScript.

Sounds like good advice. Can you give a brief example using only CSS?

a {display: block; width: 100px; height: 20px;}
a:link {background-image: url(link.gif);}
a:hover {background-image: url(hover.gif);}
a span {display: none;}

<a href="foo.html"><span>Link Text</span></a>

Problem is that when CSS is on but images are off that nothing at all
is displayed. If you can leave the text visible and just use the
changing background for decoration then that's okay. Otherwise
JavaScript is less harmful.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>