Text Link Rollovers Gerat effect for your websites

saga · May 23, 2005

Here is a simple effect for your website. What it does is when you hover your mouse icon to the text link it will change its color.1. Write this code in the head portion of your page. The head portion is where you will find the <HEAD> tag.a.mylink:hover {color:#FF0000}this is the code responsible in changing the color of your text link into red if the mouse icon is pointed to the text link.2. Whatever link you want to change into red everytime the mouse icon is pointed in to it, just add this code in the <a> tag class="mylink"example:<a href="http://yahoo.com/; class="mylink">Go To Yahoo</a>So there it goes.But actually there are many things you can do. Not just the color. You could also change the font size or make the underline disappear. You could even make it italic or bold. Try it.

Nqon · May 23, 2005

This is not right... you need to tell the browser that your writing in css.So you need to have <style type='text/css'> before you write that line of css and </style> after. You might also want to define the way the link looks when your not hovering it.You can do something like:<style type='text/css'>a.mylink {font-family: Arial;font-weight: bold;color:#000000}a.mylink:hover {color:#FF0000}</style>and then use the class="mylink" tag.It would show up as a black bold Arial link that turnes red when you hover it.

Paul · May 23, 2005

I do not know as much as you guys do, but I can still produce the same effect using Microsoft FrontPage. Just go to Page Properties, click on the advanced tab, and then click on the Rollover Effects button and specify what you want it to look like.For those who dont know designing as well (like me) this is an easier alternative.

iGuest · May 23, 2005

Well you could add blur, shadows, glowing, etc text
you could go on http://www.lissaexplains.com/fun7.shtml to know how.
And you could you could go on http://www.dynamicdrive.com/ to know other stuff! ( I like that site, it's the best so far! )

jet · May 24, 2005

But most of those effects only work in IE, and so the "look" of the site is totally
lost for the large droves of people (myself included) that use other browsers like Mozilla
Firefox. Dynamic Drive provides some nice codes for menus, calenders and such but the
Internet.Com JavaScript Site has a lot more content.

saga · May 25, 2005

Sori guys about the erroneous post about the text link rollovers... i was in hurry last time... anyway for my mistake i think i must give more time this time around

here is the whole code ...

<head><style type="text/css">a.mylink:link {color:#000000}a.mylink:visited {color:#000000}a.mylink:hover {color:#FF0000}a.mylink:active {color:#000000}</style><head>

.....

anotomy of the code

i think you already knew what the <style type="text/css"> .... </style> are for. If you havent read ngon's reply it reminds the browser what kind of style you are using in your page...

a.mylink:link {color:#000000} is a class declaration of mylink as an <a> tag. The { } is the property of that class. Here we are assigning its color to be black (#000000). In this line of code it will make the text link have the color of black in its normal state which means it is not click or not being hover or a link not yet visited

a.mylink:visited {color:#000000} is the same class with the first one. The only difference is it is all about the state of the link when it will be visisted. In our example the text link using this class will remain black if someone has already visited the link.

a.mylink:hover {color:#FF0000} is the state in which a mouse is hover to the text link. This time it will not remain black but will turn red. When the mouse is moved away from the link it will turn back to black becuase we want it to be black in its normal state using the first code a.mylink:link {color:#000000}.

a.mylink:active {color:#000000} is the same idea with the rest. This is about the active state of the link

...

I hope i made everything clear

But actualy there are lots you can do not just color. Here are some properties you can play with...

text-decoration:value -- value could be none or underline

-- removes or put underline to the link

font-size:value -- value is the size of the font in points I guess

-- changes the font size

font-weight:value -- it could be bold or normal

-- you cold make the font bold or just normal

font-family:value -- value will be the font face or type of font

there are lots but i think this will do....

here how to use this properties...

a.mylink:link {color:#000000;text-decoration:underline;font-family:times}

a.mylink:visited {color:#000000;text-decoration:underline;font-family:times}

a.mylink:hover {color:#FF0000;text-decoration:none;font-family:arial}

a.mylink:active {color:#000000;text-decoration:underline;font-family:times}

this sample codes will make the underline disappear, change color and change its font type to arial of a text link everytime the mouse is hover

warbird1405241485 · May 25, 2005

Thank you a lot guys , I was searching for this thing for months ( maybe some less, but don't care ), the result will soon be visible on my site, when I've got the required credits. Maybe it's not very good, but I'm not very good in making sites.

enemista · May 27, 2005

Anyway, these rollover texts are great way to hide your affiliates links for example if you have website dedicated to selling some stuff as an affiliate, you can make those links to not look like affiliates but link 'Buy new computer here' and it will add trust to your site.

I would say, that majority of surfers are still using IE as their browsers.

Sign In

Text Link Rollovers Gerat effect for your websites

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information