|
|
|
|
|||||
|
|
|
|
|
|
|||
| Welcome
to Tech Support Forum home to more then 136,000 problems solved. Issues
have included: Spyware, Malware, Virus Issues, Windows, Microsoft,
Linux, Networking, Security, Hardware, and Gaming Getting your
problem solved is as easy as: 1. Registering for a free account 2. Asking your question 3. Receiving an answer Registered members: * See fewer ads. * And much more..
|
| Want to know how to post a question? click here | Having problems with spyware and pop-ups? First Steps |
|
|||||||
| Web Design & Programming Discussion of web design, and server-side & client-side scripting |
 |
|
|
LinkBack | Thread Tools |
04-23-2007, 09:15 AM
|
#1 (permalink) |
|
Register user
Join Date: Mar 2007
Location: Tech Support Forum, Online - Otherwise Brighton, United Kingdom
Posts: 2,186
OS: Dual Booting - Windows XP Home Edition SP2 & Vista Home Premium
 |
Text Colour Changes When Mouse Is Over It.
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. |
|
     
|
| Important Information |
|
Join the #1 Tech Support Forum Today - It's Totally Free!
TechSupportForum.com is a leading support website for your computer needs. We offer free, friendly and personalized computer support. Why pay to have your computer fixed when you can do it for free. Join TechSupportforum.com Today - Click Here |
|
04-23-2007, 09:25 AM
|
#2 (permalink) |
|
Registered User
Join Date: Dec 2004
Location: Corinth, TX
Posts: 1,339
OS: 2000/XP/2003/Vista/2008
 |
Re: Text Colour Changes When Mouse Is Over It.
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">
__________________
"If it's really a supercomputer, how come the bullets don't bounce off when I shoot it ?" <<PC Pitstop>><< AVG Free>><<Spybot>><<Everest 2.0>><<Trend Micro House Call>><<HijackThis How-to>> |
|
|
|
|
04-23-2007, 03:33 PM
|
#3 (permalink) |
|
Design Team
Join Date: Mar 2006
Location: Philadelphia
Posts: 1,541
OS: Windows Vista Home Premium (x64)
|
Re: Text Colour Changes When Mouse Is Over It.
95's suggestion is for links.
If you just want to change normal text's color, use this code: Code:
<font color="ORIGINAL COLOR" onmouseover="color='HOVER COLOR'" onmouseout="color='ORIGINAL COLOR'">Test</font> 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.
__________________
Nice music blog  Nvu || Notepad++ || Apache || PHP || Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier." Last edited by DJ-Zep; 04-23-2007 at 03:35 PM. Reason: bold text = pretty |
|
|
|
|
04-23-2007, 08:35 PM
|
#4 (permalink) |
|
Registered User
Join Date: Aug 2005
Location: Ohio
Posts: 207
OS: VISTA
|
Re: Text Colour Changes When Mouse Is Over It.
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
Code:
<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 |
|
|
|
|
04-24-2007, 06:27 AM
|
#5 (permalink) |
|
Retired
|
Re: Text Colour Changes When Mouse Is Over It.
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.
__________________
|
|
|
|
|
| Thread Tools | |
|
|
