Forum:

HTML Pages with CSS and JavaScript

Rollover effects within HTML

Greenhorn

Posts: 18

posted 16 years ago

Hi all,
I have a hyperlink,
<a href=xx.html">Changecolor</a>
What I want to do is change the color of the link when the mouse is over it.
Is there a simple way to do this?
Please help.
Thanks

Manish Hatwalne

Ranch Hand

Posts: 2596

I like...

posted 16 years ago

Use css in head part of your HTML code
<style>

</style>
HTH,
- Manish

Randall Twede

Ranch Hand

Posts: 4702

I like...

posted 16 years ago

you can also do it this way using javascript
<A HREF="link destination"> <FONT COLOR="#first color" on_mouse_over="this.style.color='#second color'" on_mouse_out="this.style.color='#first color">link text </FONT> </A>
remove the underscores they are just because this message board software wont allow those words. you can use predefined html colors like blue yellow etc or use the rgb numbers

SCJP
Visit my download page

Vijayalakshmi Srinivasan

Greenhorn

Posts: 18

posted 16 years ago

Thanks for the replies.
Manish,
Can you please tell me what browsers support style sheets? Almost all nice websites seem to use them these days!
Randall,
I'm sorry I'm a little new to Javascript. I tried your code, but it didn't work.The page came out blank!
<A HREF="link destination"> <FONT COLOR="#first color" on_mouse_over="this.style.color='#second color'" on_mouse_out="this.style.color='#first color">link text </FONT> </A>
Can you tell me exactly where I should place this code(Head or body makes a difference?), it should be within <script></script> tags, right? and also am I missing any semi-colons or something, what's with the #?
Thanks very much.

Randall Twede

Ranch Hand

Posts: 4702

I like...

posted 16 years ago

it doesnt have to be inside <script> tags. it is just inside the <a>. for the color you can express it two ways. for example "#ffffff" and "white" are both white in html. be sure to leave out the underscores in on_mouse_over and on_mouse_out. i only had to put them in so i could post the code here. here is link http://www.geocities.com/SoHo/Lofts/5688/links_colorchange.html

SCJP
Visit my download page

Vijayalakshmi Srinivasan

Greenhorn

Posts: 18

posted 16 years ago

Thanks a lot, Randall!
The colorchange code worked perfectly! I supppose that was the most basic Javascript technique I could come across! Which means I have a lot to learn!
Could you please advise on using CSS and what browsers support them? Also, how about these rollover effects with the swapImage(or similar) functions? How well are they supported?
Thanks again!

Randall Twede

Ranch Hand

Posts: 4702

I like...

posted 16 years ago

im not really up to speed on css. or javascript either for that matter. i used image swapping on one of my sites. this is how.
<td width="145" height="40" align="center" valign="bottom"><a href="aboutme.html" on_Mouse_Over="document.aboutme.src='aboutme2.gif'" on_Mouse_Out="document.aboutme.src='aboutme1.gif'"><img name="aboutme" src="aboutme1.gif" border="0"></a></td>
there is more to it than that though. you have to preload the images for it to work smoothly.

<html>
<head>
<title>Web Solutions</title>
<meta name="keywords" content="Oregon, Web Developer, Webmaster, Website, Web Designer, Web, Developer, Design, Designer">
<script language="javascript">
home1 = new Image();
home1.src = "home1.gif";
home2 = new Image();
home2.src = "home2.gif";
aboutme1 = new Image();
aboutme1.src = "aboutme1.gif";
aboutme2 = new Image();
aboutme2.src = "aboutme2.gif";
services1 = new Image();
services1.src = "services1.gif";
services2 = new Image();
services2.src = "services2.gif";
portfolio1 = new Image();
portfolio1.src = "portfolio1.gif";
portfolio2 = new Image();
portfolio2.src = "portfolio2.gif";
contact1 = new Image();
contact1.src = "contact1.gif";
contact2 = new Image();
contact2.src = "contact2.gif";
</script>
</head>

here is site so you can see it in action
http://www26.brinkster.com/javaguy/

SCJP
Visit my download page

Vijayalakshmi Srinivasan

Greenhorn

Posts: 18

posted 16 years ago

Thanks for providing the link of your site :
http://www26.brinkster.com/javaguy/
I was able to follow most of your code. I do have a couple of questions, though :
1. Was that spider web an animated GIF? If so, what software did you use and what was the total size in Kilobytes?
2. Is your background deepblue.jpg tiled? I thought usually you create a gif and tile it?
Thanks.
P.S.
I am just starting with web design and a lot of issues like web-safe colors,mouse rollovers,image sizing etc are cropping up!Appreciate all the help I can get!

Manish Hatwalne

Ranch Hand

Posts: 2596

I like...

posted 16 years ago

Hi Vijay,
get urself 1st page software from - http://www.evrsoft.com/1stpage/
It's free, moreover it has good HTML, CSS referece and many more JavaScripts, DHTML efeects including rollovers and much more. The product is too good to be free.
Also, coming back to ur original Q, yes CSS is supported in most 4+ browsers. Moreover new generation browsers support CSS2 as specified by w3c.
You can have a look at this for few more resources and JavaScript, DHTML tips.
HTH,
- Manish
p.s. I am *not* associated with 1st page in any way, and they are not paying me to say this

Randall Twede

Ranch Hand

Posts: 4702

I like...

posted 16 years ago

yes, the spider is an annimated gif with a transparent background. it is 39K. i made it using paint shop pro and a program called animagic. yes deepblue.jpg is a background i got from somewhere. the browser does the tileing automatically.

SCJP
Visit my download page

Rollover effects within HTML

Similar Threads