[RESOLVED] Help need! How to use Javascript to change font size & color?

ian0411 · #1 07-18-2008, 09:32 PM

Hi All,

I am new to the website design world. I really love it. But I have a problem about how to link my web page to a separate .js file.

In my web page, I have 5 links. The problem I have is to use Javascript to make a rollover type of effect. I want to change fonts to 14px and blue color when the mouse hovers. And change it back when the mouse out.

Here are my codes in the web page:
--------------------------------------------------------------------
<li><a href="home.aspx" title="home">home</a></li>
<li><a href="contactinfo.aspx" title="contactinfo">contactinfo</a></li>
<li><a href="customerservice.aspx" title="customerservice">customerservice</a></li>
<li><a href="feedback.aspx" title="feedback">feedback</a></li>
<li><a href="myaccount.aspx" title="myaccount">myaccount</a></li>
---------------------------------------------------------------------

Can anyone show me how to write a Javascript code into a separate file and make this work? I really appreciate your help.

Thanks,

Ian

**Fang** · #2 07-19-2008, 12:30 AM

Use css:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
ul {width:10em;}
a {	
display:block;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#000;
background:#ccc;
} 
a:hover {
font-size:1em;
color:#00f;
background:#ff9;
}
</style>

</head>
<body>
<ul>
<li><a href="home.aspx" title="home">home</a></li>
<li><a href="contactinfo.aspx" title="contactinfo">contactinfo</a></li>
<li><a href="customerservice.aspx" title="customerservice">customerservice</a></li>
<li><a href="feedback.aspx" title="feedback">feedback</a></li>
<li><a href="myaccount.aspx" title="myaccount">myaccount</a></li>
</ul>
</body>
</html>

mathursrishti · #3 07-19-2008, 12:32 AM

No javascript required, just simple css

<style type="text/css">

.blueHover a:link
{
text-decoration: underline; color: black;
}

.blueHover a:hover
{
text-decoration: underline; color: blue;
font-size:14px;
}

</style>

--------------------------------------------------------------------
<li><a href="home.aspx" title="home" class="blueHover">home</a></li>
---------------------------------------------------------------------

ian0411 · #4 07-19-2008, 08:30 AM

Thanks Fang and mathursrishti. However, I want to learn how to use Javascript to make it happen. Maybe this is kind of stupid not to take the advantage of CSS. Do you guys can help me with that? I need to create a separate sheet to store Javascript and write some codes in HTML to read the code.

Thanks again,

Ian

ian0411 · #5 07-19-2008, 02:01 PM

Please, can anyone show me how to use JavaScript to do this trick? I really appreciate your kindness.

Thanks,

Ian

felgall · #6 07-19-2008, 06:20 PM

It is completely inappropriate to do something with JavaScript that should be done with CSS. If you were to do this with JavaScript then you'd need code to update the CSS for the "blueHover" class to the exact values that could have been entered into the CSS directly in the first place. You'd only really need to9 do that if you want visitors to be able to select between different actions on hovering over things based on a previous action and if you want that then a stylesheet switcher would be a more appropriate way of achieving it since almost all browsers have a stylesheet switcher built in and so you really only need to create a JavaScript equivalent for your visitors using Internet Explorer.

**Declan1991** · #7 07-19-2008, 07:45 PM

Unless it is a homework assignment? We don't do them for people.

ian0411 · #8 07-19-2008, 09:51 PM

I searched everywhere for text change by using JavaScript but no help. CSS maybe a better resolution for me at this time I guess. Thanks all for the help.

**Fang** · #9 07-20-2008, 01:30 AM

The usual method is to swap classes:

Code:

<li><a href="home.aspx" onmouseover="this.className='highlight';"  onmouseout="this.className='normal';" title="home">home</a></li>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)