microsoft site

look at http://www.microsoft.com/windows/default.asp

when you mouseover the links in the second column (win 98, win nt workstation 4) etc, it makes the link 3d, and changes the content of the 3rd column. i know how to do this with images, but how are they doing it? the 3d bits arent images, the text in the 3rd column is not an image. ive looked at the source of the page and its completely thrown me... can someone help plz...

thanku

daniel
th_c_manAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mayhewCommented:
It's in the style sheet IE4.css.  You see it included in the code.

In ie4.css you have

..LeftNavUp
{
    BACKGROUND-COLOR: #0099ff;
    BORDER-BOTTOM: #003399 solid 2px;
    BORDER-LEFT: #99ccff solid 2px;
    BORDER-RIGHT: #003399 solid 2px;
    BORDER-TOP: #99ccff solid 2px;
    COLOR: white;
    CURSOR: hand;
    FONT-FAMILY: verdana;
    FONT-SIZE: 11px;
    FONT-WEIGHT: bold;
    HEIGHT: 0pt;
    LETTER-SPACING: -0.5pt;
    LINE-HEIGHT: 10pt;
    MARGIN: 2px 0px;
    PADDING: 0px 3px;
    TEXT-DECORATION: none;
    WIDTH: 10px
}


In the colorblock function, you see:

oRegion.className = "LeftNavUp";


That's what does it.

Let me know if that helps.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
th_c_manAuthor Commented:
uhh... im dont really know a lot of css... could you explain yourself in a bit more detail?

thanku

daniel
0
mayhewCommented:
Sure.  Sorry.  :)

CSS is cascading style sheets.  There is a little more to it then what I'm about to describe, but this should give you the idea.

CSS lets you define a style class.  In a style class, you can set properties (like font, color, background color, font size, etc.) for html elements (like paragraph, h1, anchors, etc.)

By using a style sheet, you can create a style that you like in one place and "point" your html elements to it instead of formatting all of the individual elements in your web page over and over.

Your styles can be defined at the top of the html page you are working on, or you can put all of your style definitions in their own file (as MS does) and just refer to it from each html page.

What MS is doing is called DHTML or dynamic html.

dhtml is basically a combination of css and javascript.  It allows you to include code that dynamically changes the style that has been assigned to a page element based on events (like mouseover, for example).

So, instead of using "on" and "off" gifs for hover effects, you could use dhtml.

For example, you could have links defined as being blue and then on a onMouseOver event change the font color to red.

dhtml has problems too though.  MS's pages only work properly in IE.  NS has a different object model and so dhtml is very different on NS browsers.

But, getting back to your question, dhtml is how MS is doing what they do.

HTH
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

th_c_manAuthor Commented:
sorry, didnt phrase that very well... i know what css is, and that ns and ie rarely agree on what does what... can you plz explain in some detail what the code u've posted above does, like, what attribute affects what? most of them are obvious like color etc, but with microsoft products you never can be sure :)
i use some css in my webpages, like turning off underlines on links mostly. i havent used much more than that, and have no idea what it can actually do or how different browsers react to different things.

daniel
0
mayhewCommented:
Ah, sure.

Keep in mind that this code is written by MS for an MS product.  I'm not sure exactly where the line is for what will work with NS or not.  But I can give you the general idea on what's happening.

(Forgive me if you already understand the following part of the explanation).
Basically, the code is using javascript to create an object that represents the link that turns 3d.  On the mouseover, the code changes the attributes of that object to the following to make the 3d effect.

Sets the background of the 3d box to that light blue color.
  BACKGROUND-COLOR: #0099ff;

Sets the border around the 3d field to make it look 3d.  This is setting color(##003399), pattern (solid) and width(2px).
  BORDER-BOTTOM: #003399 solid 2px;
  BORDER-LEFT: #99ccff solid 2px;
  BORDER-RIGHT: #003399 solid 2px;
  BORDER-TOP: #99ccff solid 2px;

Text color.
  COLOR: white;

What cursor looks like when it hovers over the link.
  CURSOR: hand;

Font attributes of the text in the link.
  FONT-FAMILY: verdana;
  FONT-SIZE: 11px;
  FONT-WEIGHT: bold;


The parts I listed are the most important elements that make the link look 3d.

Does that help?

Let me know.  :)
0
th_c_manAuthor Commented:
does font-family mean a specific font or a group of similar fonts?
0
th_c_manAuthor Commented:
thank you, now i know!

daniel
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.