Enlaces con fade
2 seguidores
como hacer para que un enlace en html (<a href="pagina.html">enlace</a>) con rollover en css tenga este mismo tipo de efecto:
13 comentarios Ir al último comentario
Entra o únete Gratis para comentar
Seguro que tienes mucho que decir, te estamos esperando.
pelayo
Hola,
Con una libreria tipo mootools o jquery es fácil. Este código te aplica fade a todos los links de una página que tenga class="fade". Espero que te sirva.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.2-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
$each($$('.fade'), function(el) {
var original = el.getStyle('color');
var morph = new Fx.Morph(el,{ 'duration':'300', 'link':'cancel' });
el.addEvents({
'mouseenter' : function() { morph.start({ 'color':'#ff8c00' }) }, // Color que quieras conseguir.
'mouseleave' : function() { morph.start({ 'color': original }) }
});
});
});
</script>
<style type="text/css">
A:link {text-decoration: none; color: black;}
A:visited {text-decoration: none; color: black;}
A:active {text-decoration: none; color: black;}
A:hover {text-decoration: none; color: black;}
</style>
</head>
<body>
<a href="#" class="fade">Prueba de fade 1</a><br />
<a href="#" class="fade">Prueba de fade 2</a><br />
<a href="#" class="fade">Prueba de fade 3</a><br />
</body>
</html>
Fritsch
es casi casi exacto a lo que busco...
3 cositas:
1 - como siempre no va en ie...¿sabrias como modificarlo para que funccione (o coja el estilo 'normal' del css)?
2 - ¿como hago para que el enlace tenga un background-color?
3 - muuuuchiiisimas graaaaacias!!!
pelayo
Cambia esta línea. Creo que así está bien para IE.
'mouseleave' : function() { morph.start({ 'color':'#000000' }) }
¿Te refieres a que haga el fade con el background color?
Fritsch
asi funcciona DPM!!!
10000000 gracias tio!
el css lo tengo asi:
a{color: #000;
text-decoration: none;
}
a:hover{
background: #000;
color: #fff;
}
pelayo
Igual este se acerca más. De nada :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.2-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
$each($$('.fade'), function(el) {
var original = el.getStyle('color');
var morph = new Fx.Morph(el,{ 'duration':'300', 'link':'cancel' });
el.addEvents({
'mouseenter' : function() { morph.start({ 'background-color':'#000' })}, // Color que quieras conseguir.
'mouseleave' : function() { morph.start({ 'background-color':'#fff' }) }
});
});
});
</script>
<style type="text/css">
a{
color: #000;
background-color: #fff;
text-decoration: none;
}
a:hover{
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<a href="#" class="fade">Prueba de fade 1</a><br />
<a href="#" class="fade">Prueba de fade 2</a><br />
<a href="#" class="fade">Prueba de fade 3</a><br />
</body>
</html>
Fritsch
este es prefecto!!!
pelayo
Acuerdate si lo vas a colgar de bajarte el .js de mootools porque te lo he vinculado online.
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.2-core-yc.js"></script>Lo descargas, lo pones al lado del documento html y cambias esa línea por:
<script type="text/javascript" src="mootools-1.2.2-core-yc.js"></script>Fritsch
ok
muchas gracias
Fritsch
una ultima cosa para que el rollover queda asi (a con fondo transparente...):
a{background: transparent;
color: #000;
text-decoration: none;
}
a:hover{
background: #000;
color: #fff;
}
Fritsch
he intentdo con esto:
'mouseleave' : function() { morph.start({ 'background-color':'transparent' }) }pero no va...
=(
pelayo
El problema es hacer morph a transparente. No funcionará. Para eso hay que hacer otra aproximación. Prueba:
<script type="text/javascript">
window.addEvent('domready',function() {
$each($$('.fade'), function(el) {
el.addEvents({
'mouseenter' : function() { this.highlight('#fff', '#000') }, // Escala de color que quieras conseguir.
'mouseleave' : function() { this.highlight('#000', '#fff') }
});
});
});
</script>
<style type="text/css">
a{
color: #000;
background-color: transparent;
text-decoration: none;
}
a:hover{
text-decoration: none;
background-color: #000;
color: #fff;
}
</style>
Fritsch
lo pruebo y te digo
gracias de nuevo!
Fritsch
bueno el caso es que una vez montado me fallan otros efectos...
me imagino que sera porque tengo un jquery.js