• 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 Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Rollover effects within HTML

 
Greenhorn
Posts: 18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Ranch Hand
Posts: 2596
Android Firefox Browser Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Ranch Hand
Posts: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Vijayalakshmi Srinivasan
Greenhorn
Posts: 18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Vijayalakshmi Srinivasan
Greenhorn
Posts: 18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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/
 
Vijayalakshmi Srinivasan
Greenhorn
Posts: 18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Android Firefox Browser Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 4716
9
Scala Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic