How to get Background Effect script to work with Text

[RonJaxon]

Hello everyone. I'm hoping someone here might be able to help me figure this out.

I'm using a script called the "Disco Background effect". This causes the background slowly and continuously change colors. You can see the Script I'm using here.

What I'd like to figure out is a way to make this script also effect other things on my site. For instance I was the "HR" lines and Titles text to also change colors in sync with the background. So basically I want to know if it's possible to call this script to work on other objects such as images and text.

Here's an example of the effect I'm shooting for. This was done with an image slice and transparency.

http://magicjax.com/glowsite/

I'd appreciate any help. Thanks for your time.

Ron

[donatello]

Yes you can use it on anything you want since it is only rotating images from what I can see by looking at the CSS and script. You can probably build a simple text-as-image generator using the PHP GD library. Color the text images the same way as the slices of png images on your sample.

Better to learn Flash.

This effect can be rather annoying though... imagine a whole page of changing text and backgrounds... could make one seasick...

I would focus on creating brilliant content rather than possibly annoying colors.

IE stopped supporting the blink tag for that reason... it became really annoying... (FF still supports it.)

Another thing to stay away from is embedded music on a website.

Just my personal opinion, but many others will certainly agree with these basics.

[RonJaxon]

Thank you very much for your reply. I agree with everything you said but let me give a little more detail.

This site is for a night club. The inside of the club has lights that gradually change colors on all the walls. So the effect of that script really does fit the venue the site is for.

Here's an image I just made to help explain what I'm shooting for. The Blue that you see, and the glow around it, will be accomplished with transparent and gradient images (PNG) that the background color change effect will show through. The glow is what will change colors.

http://magicjax.com/glowsite/images/glowexample.jpg

This part I have no problem with. Where I'm having trouble if the "Title" text and the HR to be transparent while inside a table cell. That's why I was thinking (hoping) there might be a way to get the background script to work with these things. I can't work out how to fit the text in there and have the TITLE and HR change with the background. It's just beyond my knowledge.

I tried to use a span = disco() as it is in the body onload tag but that don't work (Like I said, I'm not that advanced at javascript).

Flash would be nice. That's something I do wish to learn.

Thanks again.

Ron

[criterion9]

That whole process would be a much smoother experience for both the users and the developer in Flash. Effects like that are much more difficult to achieve in javascript while trying to maintain the same look across browsers. If you haven't noticed most entertainment genre sites use Flash in place of DHTML/Javascript since Flash handles those types of animations with ease smoothly.

[donatello]

I can see your point. It does sound like a pretty cool idea for such a disco.

In this case it might make sense... we'll have to judge after we see the end result.

Did you try this?

I'm not sure if I properly understand what you are trying to achieve, but...
Try this image in your table. I simply reversed it so the body is colored, and the text is transparent.
http://img695.imageshack.us/img695/7726/titlel.png

[RonJaxon]

Thanks again guys.

Yes, I tried what you suggested donatello with the image with transparent text. That's how it works in the link in my first post in this discussion. Both the word "TITLE" and the HR line are images and have transparency as you suggested.

What works great but here's the problem. If you care to take a minute to look at the code of that page (magicjax.com/glowsite). It's a pretty complex image slice of 20 images.

The word "TITLE" is this image:
http://magicjax.com/glowsite/images/glowsite_10.png

The HR line is this image:
http://magicjax.com/glowsite/images/glowsite_13.png

They both have transparency to show the background of the page.

But the problem is they are in a table. If I can figure out how to add another table cell to add another HR image and another space to add another text area. then that design would work. But if I try to add another HR image the table spice gets messed up.

So it's a table with in a table and the background has to show through. I know, it's a headache already. But look at the code you might see what I mean.

I want to thank you guys for your help so far. Right now I'm stuck home because I just for a cochlear implant surgery 2 days ago. I'll soon be able to hear for the first time in almost 20 years. So I'm hoping to work this design out while I'm stuck home recovering. So I appreciate you taking the time to look. I'll go crazy if I don't keep busy right now. LOL

Ron

[criterion9]

What if you just added a line to the javascript that is changing the background to also change a style for the text? Then you wouldn't have to worry about letting the background show through or creat extra images at all.

[RonJaxon]

That would be perfect if I could find out how to do it. The color change needs to match in timing though.

[criterion9]

A line immediately following another line has an imperceptible time difference. You just need to fine where in the code the background is being changed and apply that change to the css class as well.

[RonJaxon]

Thank you. I'm just not sure how to do that.

Anyone willing to take a crack at it? I made this simple page. It contains the color changing background script. And a single back table with white text. If you can take a look at it. Only one script is in the HEAD of the page for the color change effect. I want the white text to change with it.

Here's the simplified page:
http://magicjax.com/glowsite/scripttest.html

Here's the page code:

<HTML>
<HEAD>
<TITLE>mainimage1</TITLE>
<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<script language="JavaScript">
<!--
//you can assign the initial color of the background here
r=255;
g=255;
b=255;
flag=0;
t=new Array;
o=new Array;
d=new Array;

function hex(a,c)
{
t[a]=Math.floor(c/16)
o[a]=c%16
switch (t[a])
{
case 10:
t[a]='A';
break;
case 11:
t[a]='B';
break;
case 12:
t[a]='C';
break;
case 13:
t[a]='D';
break;
case 14:
t[a]='E';
break;
case 15:
t[a]='F';
break;
default:
break;
}
switch (o[a])
{
case 10:
o[a]='A';
break;
case 11:
o[a]='B';
break;
case 12:
o[a]='C';
break;
case 13:
o[a]='D';
break;
case 14:
o[a]='E';
break;
case 15:
o[a]='F';
break;
default:
break;
}
}

function ran(a,c)
{
if ((Math.random()>2/3||c==0)&&c<255)
{
c++
d[a]=2;
}
else
{
if ((Math.random()<=1/2||c==255)&&c>0)
{
c--
d[a]=1;
}
else d[a]=0;
}
return c
}
function do_it(a,c)
{
if ((d[a]==2&&c<255)||c==0)
{
c++
d[a]=2
}
else
if ((d[a]==1&&c>0)||c==255)
{
c--;
d[a]=1;
}
if (a==3)
{
if (d[1]==0&&d[2]==0&&d[3]==0)
flag=1
}
return c
}
function disco()
{
if (flag==0)
{
r=ran(1, r);
g=ran(2, g);
b=ran(3, b);
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag=50
}
else
{
r=do_it(1, r)
g=do_it(2,g)
b=do_it(3,b)
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag--
}

setTimeout('disco()',50)
}
//-->

</script>
</head>
<body bgcolor="ffffff" topmargin="0" leftmargin="0" rightmargin="0" onload="disco()">
<center>
<TABLE WIDTH=500 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>


		<TD bgcolor="000000" width="200">
<font color="ffffff">
Entertaining has always been a part of Rons life, as well as profound hearing impairment. As a child he was the willing mime and drama rehersal partner for his older sister. His early interest in magic blossomed into a true passion during a chance visit to his first magic shop in Califirnia. Since then, his phenominal skill in magic and entertaining has earned him the local nickname of "Magic Man". He's the winner of the 1999 Curly's Magic competition at the Abbotts Magic get together in Colon Michigan. A town commonly known as "The Magic Capital of the World". His style of visually stunning magic combined with mad capped comedy has earned him the well deserved reputation of one of the areas leading magicians. A well respected magician among Magicians Jay Marshell summed it up after Ron won the Curly's competition when he said

"Yea, He's got it!"

Above is from the cover of my magic brochure. It was written by Nancy Krone. 

Since the above was written. Ron has also won first place in the 2002 Michigan Magic Day Close up contest, first place in 2004 Percy Abbotts Peoples choice in both close up and stage at the Abbotts Magic get together and Second place in 2004 Curly's Close up contest. 

</FONT>

</TD>
	</TR>

	
</TABLE>

</center>
</BODY>
</HTML>

Thanks again.

Ron

[criterion9]

There are two lines that change the background and they are identical:

document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]

You just need to decide how you want to affect the text and if you want all text or just a portion and then add your line setting that particular style to the same value.

[RonJaxon]

Thank you. I'm sure you're absolutely right. But how to do this is beyond me.

I'd only need some text and the HR lines to have the effect.

Thanks again.

Ron

[criterion9]

I would use CSS classes. So you add class="fadingColor" or whatever to your text you want to change and then change the color attribute of that class when you change the background. Alternatively you can use a set of IDs and change all of them one by one if you wish.

http://www.shawnolson.net/a/503/alte...avascript.html
http://dhtmlkitchen.com/learn/js/setstyle/

[RonJaxon]

Thank you for your help.

So, by looking at my code for the color changing background effect. Should this work?

<span class="disco()">THIS TEXT CHANGES COLORS</span>

I figured this would be it because my body onload looks like this:

<body bgcolor="ffffff" topmargin="0" leftmargin="0" rightmargin="0" onload="disco()">

I tried the above but it doesn't work. Any suggestions?

Here's a link to a better demonstration of what I'm shooting for. It's just a single PFG image with the color change background effect. Notice only the glowing border changes colors right now. Later, I'll want the title text and HR lines to have the same effect. But I just made this to help illustrate what I'm shooting for. Watch it for a few seconds so you'll see the color change occur.

http://magicjax.com/glowsite/scripttest.html

On a side note. I tried to make an image slice of this but when I do the transparency doesn't work right. I think I have my settings in photoshop right though. So I'm kind of stumped as to why. I realize this is a different issue but since I'm here I thought I'd mention it in case any of you might have a suggestion.

Thanks again.

Ron

[RonJaxon]

Thanks again for the help any suggestions everyone.

Unfortunately I still can't get it to work. So I'll just get right to the point.

How can I get this script to work on text?

Right now it works on the background of the page with a body onload tag.

I need to learn how to call the script to work on text. Some of you have made suggestions and I do appreciate that. But what I need is a "How to". I'm not all that knowledgeable in Javascript.

Thanks again.

Ron