FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS or Javascript?

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


PatTheGreat42
I'm writing a website for a client, for which the most important aspect is a niftalicious menu bar at the top.

This menu bar is all set to be pretty standard, but effective nontheless, with different links set in individual cells in a table. The goal is to make it so that when you hover over a link, the background of the cell changes color.

So the question is this: is it better to A) Use the CSS and :hover to change the background, B) Use javascript and the onMouseover function, or C) Give up because it's impossible?

Although I wouldn't say no to some nice code and a thoughfully written tutorial, all I really need is to know whether it's better to use CSS or Javascript, keeping in mind ease, reliability, and cross-platform compatibility. THANKS!

Oh, and as an added incentive, there might be some FRIH$ to be made...
Summer
Using css is easier . eg :

Code:

#class {style of div here}

#class a:link, #class a:visited {
   background: url(image);
}

#class a:hover {
   background: url(rollovered_image);
}


then apply this to the html file

Code:

<div id="class">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>


i hope this helps u .
srijit
CSS is better, but make sure that it works in all browsers Very Happy
shabda
css wil be way easier.
Quote:
the background of the cell changes color.

something like this.
Quote:

a{
background:red;
}
a:hover{
background:blue;
}


Quote:
..with different links set in individual cells in a table

with css you shouldnot have to use tables, surelynot for layout.
http://www.google.co.in/search?q=css+rollover+menu&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official
The first link will be how to make a beautiful css menu without tables.
Ashims
The thing you have to remember about CSS is that Internet Explorer is CRAP, and doesn't support it properly. In this case, you'll find that the :hover attribute doesn't work on anything but links (<a>).

Of course, the example given overcomes this problem, so you should be right Smile.

Cheers.
Ash.
PAHAN
I think css more simple than javascript.
Has added one line in the code and all and it is not necessary to enter on each page same constantly... I css have more to like.. Cool
sprinqles
I would definitely go for css over javascript. Although you can do loads more with javascript, css is easier to understand and deal with. There are alot of css generators over the web right now. Smile Goodluck! Smile
Miss Luna
I think it totally depends on what type of navigation bar you're going for. While CSS is definitiely easier that JavaScript, CSS only really works with text links. If your navigation bar is graphics-based, then JavaScript is the better option.
DX-Blog
Background of the cell as said will not work, yet you can let the a look like a cell in which way you can give it a hover attribute.

@Miss Luna: Even for graphics based you can use CSS, Summer gave an example of how this works.
polarBear
CSS is the easy way to do what you want.

you should do something like this:
Code:
<style type="text/css">
#yournavsID a{
width:/*YOUR LINK'S MAXIMUM WIDTH*/;
height:/*YOUR LINK'S HEIGHT*/
background-color:/*THE BACKGROUND COLOR YOU WANT YOUR LINKS TO BE BY DEFAULT*/;
}
yournavsID a:hover{
background-color:/*THE BACKGROUND 'WHEN MOUSE GOES OVER THE LINK'*/
}
</style>


That would do the work just fine.
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.