I would highly advised reimplementing this and not trying to fudge the
javascript. The css version is much easier to maintain.
do a google search for css rollover buttons. There's a ton of tutorials out
there.
They all basically say:
-make your links block elements. once the links are block elements, you can
arranged them however you want. I usually drop them into a <ul> and use the
list as a nav bar. (looks like your site could just have 2 list of links and
you can place them on either side of the logo. (be sure to turn list styling
off - ul {list-style:none} - if you use ul's)
a.rollover{display:block;}
- make your links the same height and width as your image
a.rollover{
display:block;
height:25px;
width:100px;
}
- use your desired image as the background of the links
a.rollover{
display:block;
height:25px;
width:100px;
background: #ffffff url('dogbone.gif') no-repeat fixed center;
}
- then use the a:hover pseudo element to switch the background when you
mouse over the links
a.rollover:hover
{
background: #ffffff url('dogbonewithbite.gif') no-repeat fixed center;
}
I promise, after doing pure css rollovers, you'll never go back.
cheers,
-jk
On 8/31/05, Pat Pruyne <[EMAIL PROTECTED]> wrote:
>
> Greetings,
>
> I'm still medium-low on the CSS learning curve and have been
> tasked to update a site created by someone else that has lots of
> javascript button image replacement actions at the top of it.
>
> My temptation is to just take the javascript and tuck them into
> their own containers so that I can position them.
>
> I am certain there is a better way to do this.
>
> Here's the page:
>
> http://www.valleyvethospital.com/index2.html
>
> I would welcome pointers and clues as to how I should approach
> this and learn something (a lot!) in the process.
>
> Thanks,
>
> Pat
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org <http://evolt.org> --
> http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
