text rotation problem

@timideNov 25.2004

Hi,

i have seen this script on the website :
~~[url]~~http://javascript.internet.com/messages/text-rotater.html[/url]

and i need to apply diffetens style to each ‘textStr’.

I have try things that didn’t work (i’m a newbie…)
For exeample i want textStr[0] in red bold and textStr[1] yellow italic.
Do you think you can help me?

Thanks in advance

to post a comment

JavaScript

@ExuroNov 25.2004 — #I don't tend to like scripts from JavaScriptSource, so I wrote a new one instead:

&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Text Rotation&lt;/title&gt;
 &lt;style type="text/css"&gt;
 &lt;!--
 [color=purple]/* This is the base style for the text rotator */
 #textRotator {
 font-size:1.5em;
 text-align:center;
 }[/color]
 [color=blue]/* The following style correspond to the different text
 messages, so you can set their styles individually */
 .textMessage0 {
 color:red;
 font-weight:bold;
 }
 .textMessage1 {
 color:yellow;
 font-style:italic;
 }
 .textMessage2 {
 color:green;
 text-decoration:underline;
 }[/color]
 --&gt;
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 [color=red]// Set the text messages
 var textMessages = [
 "This should be red and bold",
 "This should be yellow and italic",
 "This should be green and underlined"
 ];[/color]
 // Set the delay time between the rotations (it's in miliseconds!)
 var ROTATE_DELAY = 2000;
 // Don't edit anything after this
 onload = new Function("rotateText(0)");
 function rotateText(msgNum) {
 var textDisplay = document.getElementById("textRotator");
 textDisplay.replaceChild(document.createTextNode(textMessages[msgNum]),textDisplay.firstChild);
 textDisplay.className = "textMessage"+msgNum;
 if (++msgNum &gt;= textMessages.length) {
 msgNum = 0;
 }
 setTimeout("rotateText("+msgNum+")",ROTATE_DELAY);  <br/>
 }
 --&gt;
 &lt;/script&gt;
 &lt;body&gt;
 &lt;div id="textRotator"&gt;&amp;amp;nbsp;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

The styles are manipulated through CSS classes, so just edit the class that corresponds to each text message's index. You can of course add more messages, or remove some, but you'd have to add/remove CSS classes too. Anyway, I hope that helps!

@timideauthorNov 26.2004 — #thank your for your script! it works on IE, netscape, firefox :-)

i don't understand everything ...

where i must put a link for this rotate text (same link for the three texts) ?

(sorry for english)

@timideauthorNov 26.2004 — #can i do this:

<a href="http://www.google.com/"><div id="textRotator"> </div></a> ?

@ExuroNov 26.2004 — #Yeah, that should work. You've probably already tried it by now though and figured that out. ?

[i]Edit:[/i]

I just realized though, that you're putting a [FONT=courier new]<div>[/FONT] within an [FONT=courier new]<a>[/FONT] tag, which is technically invalid. It would be simpler if you just gave the link the ID:
<a id="textRotator" href="http://www.google.com/">&amp;nbsp;</a>

text rotation problem

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

text rotation problem

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴