Duda con HTML. Menú con color de fondo diferente
3 seguidores
Estoy con mi portfolio web...llevo años en ello...
De pronto se me ha ocurrido, la idea que cada menú tenga un color de fondo diferente...
En flash, es sencillo...pero me gustaría hacerlo en html...existe alguna web de recursos
El efecto es este:
http://www.gratisweb.com/sergiopop/casapepe.swf
gracias
hartum
te refieres a que cambie el color del fondo, osea que haga la transicion de un color a otro??? si es asi tengo un js por ahi.
Editado:
ok en primer lugar hazte un archivo llamado fat.js y dentro le pones esto:
<code>
// The Fat.fade_element() function accepts several arguments: Target ID, Frames Per Second, Fade Duration, Fade Color, Final Color.
var Fat = {
make_hex : function (r,g,b)
{
r = r.toString(16); if (r.length == 1) r = '0' + r;
g = g.toString(16); if (g.length == 1) g = '0' + g;
b = b.toString(16); if (b.length == 1) b = '0' + b;
return "#" + r + g + b;
},
fade_all : function ()
{
var a = document.getElementsByTagName("*");
for (var i = 0; i < a.length; i++)
{
var o = a[i];
var r = /fade-?(\w{3,6})?/.exec(o.className);
if (r)
{
if (!r[1]) r[1] = "";
if (o.id) Fat.fade_element(o.id,null,null,"#"+r[1]);
}
}
},
fade_element : function (id, fps, duration, from, to)
{
if (!fps) fps = 30;
if (!duration) duration = 3000;
if (!from || from=="#") from = "#FFFF33";
if (!to) to = this.get_bgcolor(id);
var frames = Math.round(fps * (duration / 1000));
var interval = duration / frames;
var delay = interval;
var frame = 0;
if (from.length < 7) from += from.substr(1,3);
if (to.length < 7) to += to.substr(1,3);
var rf = parseInt(from.substr(1,2),16);
var gf = parseInt(from.substr(3,2),16);
var bf = parseInt(from.substr(5,2),16);
var rt = parseInt(to.substr(1,2),16);
var gt = parseInt(to.substr(3,2),16);
var bt = parseInt(to.substr(5,2),16);
var r,g,b,h;
while (frame < frames)
{
r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
h = this.make_hex(r,g,b);
setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);
frame++;
delay = interval * frame;
}
setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
},
set_bgcolor : function (id, c)
{
var o = document.getElementById(id);
o.style.backgroundColor = c;
},
get_bgcolor : function (id)
{
var o = document.getElementById(id);
while(o)
{
var c;
if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
if (o.currentStyle) c = o.currentStyle.backgroundColor;
if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
o = o.parentNode;
}
if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
return c;
}
}
/*
window.onload = function ()
{
Fat.fade_all();
}
*/
</code>
Una vez tengas tu libreria de fat (Fade anithing) abret una pagina html un test.html por ejemplo y pones esto para testearlo y ver como funciona:
<code>
<DOCTYPE>
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta>
<script></script>
<script>
function mi_test(){
Fat.fade_element("enlace", 60, 200, "#FFFFFF", "#FF9933")
}
</script>
</head>
<body>
<a href="#" id="enlace">esto es un link</a></body>
</html>
</code>
Espero que te sirva
susopb
hombre creo que en css se podría. En esta página es posible que encuentres lo que necesitas http://www.cssplay.co.uk/menus/