Foros Programación Cliente
Enlaces con fade
13 13 Respuestas Miércoles 3 de junio, 2009
como hacer para que un enlace en html (<a href="pagina.html">enlace</a>) con rollover en css tenga este mismo tipo de efecto:
http://bitsamppixels.com/fading-header/
http://bitsamppixels.com/fading-header/
-
P.
Registrado desde 19/03/09 / Número de posts: 17
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> -
marisolivier
Registrado desde 06/09/04 / Número de posts: 88
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!!! -
P.
Registrado desde 19/03/09 / Número de posts: 17
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? -
marisolivier
Registrado desde 06/09/04 / Número de posts: 88
asi funcciona DPM!!!
10000000 gracias tio!
el css lo tengo asi:a{
color: #000;
text-decoration: none;
}
a:hover{
background: #000;
color: #fff;
} -
P.
Registrado desde 19/03/09 / Número de posts: 17
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> -
P.
Registrado desde 19/03/09 / Número de posts: 17
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> -
marisolivier
Registrado desde 06/09/04 / Número de posts: 88
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;
}
-
marisolivier
Registrado desde 06/09/04 / Número de posts: 88
he intentdo con esto:
'mouseleave' : function() { morph.start({ 'background-color':'transparent' }) }
pero no va...
=(
-
P.
Registrado desde 19/03/09 / Número de posts: 17
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> -
marisolivier
Registrado desde 06/09/04 / Número de posts: 88
bueno el caso es que una vez montado me fallan otros efectos...
me imagino que sera porque tengo un jquery.js
Áreas Domestika
- Diseño (gráfico, web, industrial, producto)
- Programación (cliente, servidor, accesibilidad)
- Ilustración (autores, inspiración, técnicas)
- Fotografía (técnica, equipo, autores)
- Motion Graphics (showreels, software, estudios)
- Publicidad (campañas, anuncios, ideas)
- Informática (software, hardware, trucos)
- 3D (técnicas, iluminación, modelado)
- Experiencia de Usuario (usabilidad, AI, HCI)
- Cine, vídeo y televisión (críticas, producción)
- Música y Audio (sonidos, loops, discos)
- Espacios (arquitectura, interiorismo)