How do I make text (link to be exact) change color upon mouseover?For all links, use the following CSS:
a:link {
background-color: ...;
color: ...;
}
a:link:hover {
background-color: ...;
color: ...;
}If you only have specific links in mind, then you'll obviously need to change the selector, either using the document structure, or a class attribute.
For example, if the links were in a particular paragraph, you might use:
#paragraph a:link {
/* ... */
}
#paragraph a:link:hover {
/* ... */
}where paragraph was the id attribute value of the p element.
Using a class, you might have:
a.external:link {
/* ... */
}
a.external:link:hover {
/* ... */
}with links like:
<a class="external" href="...">...</a>
Or should I not bother with the text and just make two images and js those for mouseover?No. In this case, CSS is much better for a couple of reasons.
The first is that the text is resizable, which is a good accessibility bonus. Using images to present text can lead to sites that are hard to read for those with less-than-perfect eyesight, unless you're careful.
The second benefit is that you don't rely on client-side scripting. Whilst CSS is optional just like scripts are, style sheets are disabled less often.
The third is that using plain text requires much less traffic. A well-designed script will be at least a couple of kilobytes - the images will be too (and you'll have two per link). Finally you have the links in HTML. Compare that to just simple HTML and a couple hundred bytes in a style sheet, and the difference could be significant (depending on the number of links).
Hope that helps,
Mike