This week's book giveaway is in the Cloud/Virtualization forum.
We're giving away four copies of Grokking Bitcoin and have Kalle Rosenbaum on-line!
See this thread for details.
Win a copy of Grokking Bitcoin this week in the Cloud/Virtualization forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Bear Bibeault
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Paul Clapham
  • Devaka Cooray
  • Knute Snortum
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Frits Walraven
Bartenders:
  • Carey Brown
  • salvin francis
  • Claude Moore

Rollover effects within HTML  RSS feed

 
Vijayalakshmi Srinivasan
Greenhorn
Posts: 18
posted 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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...
Android Firefox Browser Ubuntu
posted 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Use css in head part of your HTML code
<style>
<!--
a {color:#0000ff;}
a:hover {color:#ff0000;}
-->
</style>
HTH,
- Manish
 
Randall Twede
Ranch Hand
Posts: 4702
9
I like...
Java Scala
posted 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
9
I like...
Java Scala
posted 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
9
I like...
Java Scala
posted 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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...
Android Firefox Browser Ubuntu
posted 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
9
I like...
Java Scala
posted 17 years ago
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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

 
I'm not dead! I feel happy! I'd like to go for a walk! I'll even read a tiny ad:
Create Edit Print & Convert PDF Using Free API with Java
https://coderanch.com/wiki/703735/Create-Convert-PDF-Free-Spire
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!

Similar Threads