Description:
Look Ma, no JavaScripts! Using CSS pseudo class definitions for the <img> tag is all you need to make highlighted borders on all your linked images.
Example:     
Unfortunately, NOF's CSS Editor does not accept the syntax for <a img>. So here is an alternate approach to adding CSS definitions to your web pages. Don't worry, this won't hurt a bit.
Tutorial:
- In your MasterBorders properties box, click the HTML button.
- Copy code from this box:
<style type="text/css">
a img {border: 2px solid #FFFFFF;}/* This is image border; set to page background color; white */
a:hover img {border: 2px solid #EFAB08;}/*this is the highlight color; gold */
a:focus img {border: 2px solid #EFAB08;}
</style>
- Paste code in the <Between Head Tags> tab as shown and hit OK.
- Adjust the Hex #colors to match your site's color scheme. Here's a handy Hexadecimal Color Chart to help you with your color choices.
- IMPORTANT: If you have applied HTML Borders to your images via the Picture Properties Box, you must remove them. HTML image borders will cancel out CSS image borders.
By the way, these image borders work on image shapes too. Just set the line width to 0.
That's all there is to it. We hope you found this tutorial useful and fun.
|
