Instinct
25-08-2004, 07:07 AM
Note : As this is my first tutorial for InfernoForums any feedback would be greatly appreciated.
In the past many developers looked towards javascript as a solution to their mouse-over needs. Although, as many would agree, this has been done because it works. But, as always there is another way, a simpler* way, using CSS.
CSS or Cascading Style Sheets can be used in seperate pages in the header or included as a .css file into every page on the site.
Firstly we need to create the css file we will include. So create a file called hover.css and insert the following :
a:hover {
background-color: transparent;
}
a span.open, a:hover span.over {
display: inline;
}
a:hover span.open, a span.over {
display: none;
}
Once saved this file does the following :
* Allows the mouse-overs to work in both Firefox and IE witht the "background-color: transparent; " line.
* If a link is hovered over the span called over will show, and if not the span open will show.
Now on any page you wish to use mouse-over affects with just insert <link rel="stylesheet" type="text/css" href="hover.css" /> just before the </head> tag.
To make a mouse over now (using text or images) enter the following :
<a href="2.html">
<span class="open"><img src="1.gif" border=0></span>
<span class="over"><img src="2.gif" border=0></span>
</a>
<br>
<a href="3.html">
<span class="open">Text 1</span>
<span class="over">> Text 2</span>
</a>
I hope this helps some-one. :)
-Instinct
In the past many developers looked towards javascript as a solution to their mouse-over needs. Although, as many would agree, this has been done because it works. But, as always there is another way, a simpler* way, using CSS.
CSS or Cascading Style Sheets can be used in seperate pages in the header or included as a .css file into every page on the site.
Firstly we need to create the css file we will include. So create a file called hover.css and insert the following :
a:hover {
background-color: transparent;
}
a span.open, a:hover span.over {
display: inline;
}
a:hover span.open, a span.over {
display: none;
}
Once saved this file does the following :
* Allows the mouse-overs to work in both Firefox and IE witht the "background-color: transparent; " line.
* If a link is hovered over the span called over will show, and if not the span open will show.
Now on any page you wish to use mouse-over affects with just insert <link rel="stylesheet" type="text/css" href="hover.css" /> just before the </head> tag.
To make a mouse over now (using text or images) enter the following :
<a href="2.html">
<span class="open"><img src="1.gif" border=0></span>
<span class="over"><img src="2.gif" border=0></span>
</a>
<br>
<a href="3.html">
<span class="open">Text 1</span>
<span class="over">> Text 2</span>
</a>
I hope this helps some-one. :)
-Instinct