Jump to content

mouse over


kishou

Recommended Posts

<html><head><style>a {color: #FFFFFF;text-decoration: none;}a:hover {color: #AAAAAA;text-decoration: none;}</style></head><body><a>Some text goes here</a></body></html>

This all put together should change the color of the text when you hover over it, and make sure that it isn't automatically underlined. Change the "#FFFFFF" to whatever color you want it to normally be, and the "#AAAAAA" determines what color it will be when hovered over. You can also add other things to change the color when it's been visited or active.

Link to comment
Share on other sites

I have set a style sheet up on my website, so that I can easily pick which kind of link I would like to use. To create a style sheet, open notepad up, paste in the code that I am going to give you, then save it as stylesheet.css.

a:link { color:#0000ff; text-decoration:none; }a:visited { color:#0000ff; text-decoration:none; }a:hover { color:#006633; text-decoration:underline overline; }a.2:link { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:visited { color:#0000ff; text-decoration:none; font-weight:bold; }a.2:hover { color:#006633; text-decoration:underline overline; font-weight:bold; }a.3:link { color:#000000; text-decoration:none; }a.3:visited { color:#000000; text-decoration:none; }a.3:hover { color:#006633; text-decoration:underline overline; }a.4:link { color:#ff0000; text-decoration:none; }a.4:visited { color:#ff0000; text-decoration:none; }a.4:hover { color:#006633; text-decoration:underline overline; }a.5:link { color:#006633; text-decoration:none; }a.5:visited { color:#006633; text-decoration:none; }a.5:hover { color:#006633; text-decoration:underline overline; }

Now as you can see, i have separated all of the different styles of link into little separate bits. A normal link, will display using the styling of the first block (a:link, a:visited, a:hover). If you would like a different kind of link, then chose which one you want and add this to your link code:<a class="2, 3, 4 or 5" href="mysite.html">Click Here</a>Just select which one you want by typing the appropiate number. Obviously you can change the styles that are there, or add more, or do whatever you want to them really. You just have to make sure that you know anything you change in the top block will change the way that your links without a class work.Also you need to add this little bit of code to the <head> of your HTML page:<LINK rel="stylesheet" type="text/css" href="stylesheet.css">I would recomend that if you like this method you add it to your template page if you have one, then every page that you create using your template will link to your style sheet. Many more things like the layout of your page, how different heading display, how images display, what text is likein tables and lots more can be specified in your stylesheet. if your website uses CSS it means that you can get rid of all depriciated HTML tags.Hope this helps! :)

Link to comment
Share on other sites

does anyone know to the code so tht when you place a mouse over the text it changes the text?
All of the previous replies are about how the text looks. If you are wanting to actually change the text, you'll need to use javascript and the DOM:
<a href="mylink.html" onmouseover="this.innerHTML = 'CLICK IT!';" onmouseout="this.innerHTML = 'click me';">click me</a>

Link to comment
Share on other sites

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...