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.
Fritsch
bueno el caso es que una vez montado me fallan otros efectos...
me imagino que sera porque tengo un jquery.js
Fritsch
lo pruebo y te digo
gracias de nuevo!
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
he intentdo con esto:
'mouseleave' : function() { morph.start({ 'background-color':'transparent' }) }pero no va...
=(
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
ok
muchas gracias
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
este es prefecto!!!
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
asi funcciona DPM!!!
10000000 gracias tio!
el css lo tengo asi:
a{color: #000;
text-decoration: none;
}
a:hover{
background: #000;
color: #fff;
}
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
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
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>