# Text Colour Changes When Mouse Is Over It.



## Jaymie1989 (Mar 25, 2007)

Hi I want a HTML so the colour of the text changes when the mouse hovers over it. 

Also if you know a HTML code for hyperlinking pictures please let me know thanks.


----------



## 95five-0 (Dec 7, 2004)

In the <head> area add something along these lines:

<style type="text/css">
A:link { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none }
A:visited { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none }
A:hover { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}

</style>


then in the link itself add class="a:link" ie <a href= "..." class="a:link">


----------



## DJ-Zep (Mar 11, 2006)

95's suggestion is for links.

If you just want to change normal text's color, use this code:

```
<font color="ORIGINAL COLOR" onmouseover="color='HOVER COLOR'" onmouseout="color='ORIGINAL COLOR'">Test</font>
```
Any questions, just ask.

*Technical explanation:*
I used the javascript *onmouseover* function to change the attribute *color* when you hover over the text. I used the javascript function *onmouseout* to return it to the original color that it was.


----------



## Damion (Aug 16, 2005)

well they took care of the color changeing as for the hyperlinking of pictures its the same as a text hyperlink except you put the img tag with it


```
<a href = "http://www.yahoo.com"><img src="dark d.jpg" border = 0></img></a>

// replace www.yahoo.com with the url of your choosing but leave the http://

// dark d.jpg gets replaced with the path to the image

// if you want a border then take out boreder = 0 other wise leave it
```


----------



## gamerman0203 (Oct 28, 2005)

95 and DJ's method's would both work fine. I personally would go with 95's because the <font> tag used in DJ's example is a depreciated tag and will be phased out. As a variation of DJ's method, you could do this:

<span style="color:ORIGINAL COLOR" onmouseover="this.style.color='HOVER COLOR'" onmouseout="this.style.color='ORIGINAL COLOR'">Test</span>

You can also have several different links with different colors using either method, but 95's would be easier to do. Example:

<style type="text/css">
a:link { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none }
a:visited { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none }
a:hover { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
_The above will affect every link placed on the page._

a.link1:link { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none }
a.link1:visited { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none }
a.link1:hover { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
_The above will affect only the links with a class designation of "link1". To get several different "classes" just copy and paste the above as many times as you have different links and then change "link1" to each links' class name._
</style>

By using the above example for several links, you can change the color in only one spot (the above the text) and it will automatically change it for every link on the page or every link with the proper class designation. That saves you from going to every link in the page and changing the color.

It is quite simple when you get the hang of it.


----------

