Ever wondered how people make images fade and then un-fade when you hover the mouse over the, in this tutorial you will find out just how this ever wondered how people make images fade and then un-fade when you hover the mouse over them, in this tutorial you will find out just how this happens and how to do it. To start off you must place this code between the head tags.
Code:
<style type="text/css">
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50);
-moz-opacity: 0.5;
}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=100);
-moz-opacity: 1;
</style>
After this you have to have every image that you want highlighted, code looking like this:
Code:
<a href="Link here" class="highlightit">[img]Image path here[/img]</a>
You can edit the opacity of the image whens normal and got the mouse above it by typing a new number in the opacity brackets, for example:
---------------------------------
In this tutorial you will learn how to completely customise the colour of your links. Put this in the head tags.
Code:
<style type="text/css">
<!--
a.linkStyleName:link {color: white}
a.linkStyleName:visited {color: red; }
a.linkStyleName:hover {color: pink; }
a.linkStyleName:active {color: yellow; }
-->
</style>
Change the colours to suit your site, right now everytime you want to apply this code to your links. Your links should now look like this:
Code:
<a href="Link Goes Here" class="linkStyleName">Text Here</a>
Copyright Jamie Salvage.
