Home
|
Developer Home
|
Accessibility
|
ASP
|
CGI/Perl
|
DHTML
|
HTML
|
Includes
|
Javascript
|
PHP
|
Style Sheets
|
You are here : Home - Web Development - Style Sheets - Hovers with transitions
A.nav{
font:normal x-small verdana, sans-serif;
width:150px;
height:20px;
border: 1px solid #ffffff;
color:navy;
background: #e0e0e0;
text-decoration: none;
cursor:pointer;
display: block;
}
A.nav:Hover{
color:red;
width:150px;
border: 1px solid #ffffff;
background: #ffffff;
text-decoration: none;
display: block;
}
</style>
<!--
var opera = (navigator.userAgent.indexOf('Opera 7')!=-1);
var msie = (navigator.userAgent.indexOf('MSIE')!=-1);
if (msie && !opera){msie=1;}
if (msie && opera){msie=-1;}
if (msie == 1){
delay=.5;
effect=6;
document.write("<style type=\"text/css\">");
document.write("A.nav{filter:revealTrans(duration="+delay+", transition="+effect+");");
document.write("<\/style>");
}
function doovernav(what){
if (msie == 1){
what.filters.revealTrans.apply();
what.filters.revealTrans.play();
}
else{return false;}
}
function dooutnav(what){
if (msie == 1){
what.filters.revealTrans.apply();
what.filters.revealTrans.play();
}
else{return false;}
}
// -->
</script>
0 Box in : 1 Box out
2 Circle in : 3 Circle out
4 Wipe up: 5 Wipe down
6 Wipe right : 7 Wipe left
8 Vertical blinds : 9 Horizontal blinds
10 Checkerboard across : 11 Checkerboard down
12 Random dissolve
13 Split vertical in : 14 Split vertical out
15 Split horizontal in : 16 Split horizontal out
17 Strips left down : 18 Strips left up
19 Strips right down : 20 Strips right up
21 Random bars horiz : 22 Random bars vert
23 Random
Why not discuss this article in our forum?
Hovers with transitions
Add fancy effects to your navigation with this simple script. Transitions only work in Internet Explorer but normal hovers work in all the newer browsers. Using this script will use the IE transition feature but it won't break the normal hover functions of other browsers.
Take a look at these
If you are not using Internet Explorer you will only see the nomal hover effects.
How we do it
First we create the style sheet - place between <head></head> tags.
A.nav{
font:normal x-small verdana, sans-serif;
width:150px;
height:20px;
border: 1px solid #ffffff;
color:navy;
background: #e0e0e0;
text-decoration: none;
cursor:pointer;
display: block;
}
A.nav:Hover{
color:red;
width:150px;
border: 1px solid #ffffff;
background: #ffffff;
text-decoration: none;
display: block;
}
</style>
Next we need the javascript - place between <head></head> tags.
<script type="text/javascript" language="JavaScript"><!--
var opera = (navigator.userAgent.indexOf('Opera 7')!=-1);
var msie = (navigator.userAgent.indexOf('MSIE')!=-1);
if (msie && !opera){msie=1;}
if (msie && opera){msie=-1;}
if (msie == 1){
delay=.5;
effect=6;
document.write("<style type=\"text/css\">");
document.write("A.nav{filter:revealTrans(duration="+delay+", transition="+effect+");");
document.write("<\/style>");
}
function doovernav(what){
if (msie == 1){
what.filters.revealTrans.apply();
what.filters.revealTrans.play();
}
else{return false;}
}
function dooutnav(what){
if (msie == 1){
what.filters.revealTrans.apply();
what.filters.revealTrans.play();
}
else{return false;}
}
// -->
</script>
All you need to do is set the delay and the value of the effect you want.
Transitions effect values0 Box in : 1 Box out
2 Circle in : 3 Circle out
4 Wipe up: 5 Wipe down
6 Wipe right : 7 Wipe left
8 Vertical blinds : 9 Horizontal blinds
10 Checkerboard across : 11 Checkerboard down
12 Random dissolve
13 Split vertical in : 14 Split vertical out
15 Split horizontal in : 16 Split horizontal out
17 Strips left down : 18 Strips left up
19 Strips right down : 20 Strips right up
21 Random bars horiz : 22 Random bars vert
23 Random
Finally.. What we need to do is make the links
<a href="THE_LINK" class="nav" onmouseover="doovernav(this);" onmouseout="dooutnav(this);">THE_LINK_TEXT</a>That's all there is to it :) Enjoy.
15 Dec 2003
Why not discuss this article in our forum?
[
]
[
]
]
[]