File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes How do they do that? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How do they do that?" Watch "How do they do that?" New topic
Author

How do they do that?

ernest fakudze
Ranch Hand

Joined: Aug 27, 2001
Posts: 216
When I move my mouse over the links of some websites e.g. MS Website, the background of the link is highlighted in a certain colour. How is this done because I like it and I would like to experiment with it? Is it CSS??


In a time of drastic change it is the learners who inherit the future. The learned usually find themselves equipped to live in a world that no longer exists.<br />Eric Hoffer
Mark Herschberg
Sheriff

Joined: Dec 04, 2000
Posts: 6037
I'm moving this to... JSP? I guess that's closest.
--Mark
Thomas Paul
mister krabs
Ranch Hand

Joined: May 05, 2000
Posts: 13974
Moving this to HTML and JavaScript.


Associate Instructor - Hofstra University
Amazon Top 750 reviewer - Blog - Unresolved References - Book Review Blog
Michael Bronshteyn
Ranch Hand

Joined: Mar 26, 2002
Posts: 85
Look at the JavaScript. Something like "onMouseOver". Not sure exactly, but you can figure it out.


Michael
SCJP2
ernest fakudze
Ranch Hand

Joined: Aug 27, 2001
Posts: 216
I'm sorry sherrifs for orignally posting the msg to the wrong forum. I was day-dreaming.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

Yes, it's CSS. In your onmouseover handler you can modify any CSS style (including background color).
I tried to post some code, but all the underscores and entity references in the world didn't seem to make it past the guardians, so you'll have to piece it together from the following:
To define your handler use the following attribute:

(as always, remove the underscores)
The highlight function would then be passed the element, and could do something like:

(remove spaces)
to change the background color.
You'll also want to use the on_mouse_out handler to restore the style after the mouse leaves.
Note:
1) You could create a single function and pass the new color to the function.
2) You could (this is what I would do) assign a new style class rather than a specific style to the element. That way the stylistic information is off on your style sheet rather than hard-coded in the HTML or JavaScript.
hth,
bear


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Neil Laurance
Ranch Hand

Joined: Jul 18, 2002
Posts: 183
Another way for the more recent browser incarnations:

Cheers, Neil
Amit Patel
Ranch Hand

Joined: Nov 01, 2002
Posts: 31
Also you can make one file call main.css with following code
A{
font-weight : bold;
color:#ffff99;
text-decoration:none;
}
A.thin{font-weight:normal}
A:hover {
color:white;
background-color:black;
}
and on each page put this one like between <head>
<link rel="stylesheet" type="text/css" href="main.css">
That way when one day you wants to change color or style you don't have to open each page. Just open main.css and Bingo!
you can add lots of more things in this code for body backgroung and text size color and more... all from one file,
Akk the best.
-=Amit=-


www.acpatel.com/risc/demo [Please don't click on any link, this is just for display]
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How do they do that?