[css-d] Converting javascript heavy page to CSS2 - help needed

2005-08-31 Thread Pat Pruyne

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://www.evolt.org/help_support_evolt/


Re: [css-d] Converting javascript heavy page to CSS2 - help needed

2005-08-31 Thread Jonathan Kart
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: #ff 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: #ff 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/


Re: [css-d] Converting javascript heavy page to CSS2 - help needed

2005-08-31 Thread Jim Davis
Pat,

Here is a link to an interesting approach for image replacement
http://alistapart.com/articles/imagemap/
Jim

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.
 

__
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/