In the random and continous manner that this fiddle changes the color of the blocks: http://jsfiddle.net/fenderistic/48KzD/ , how would I change the color for a block of words?

At first I was simply going to have each word in the phrase change with the hover and active properties, but I also wanted a onmouseout effect that would leave it different than the initial. As I learned about onmouseover (from this site), I thought about the colors perpetually changing but couldn't figure that out.

Here's what I have so far:

<div style="color:BLACK;"><font onmouseover="this.color='MAROON';" onmouseout="this.color='RED';" >THE</font></div>
<div style="color:BLUE;"><font onmouseover="this.color='NAVY';" onmouseout="this.color='SILVER';" >KID</font></div>
<div style="color:FUCHSIA;"><font onmouseover="this.color='OLIVE';" onmouseout="this.color='TEAL';" >WHO</font></div>
<div style="color:GRAY;"><font onmouseover="this.color='AQUA';" onmouseout="this.color='YELLOW';" >FOUND</font></div>
<div style="color:GREEN;"><font onmouseover="this.color='ORANGE';" onmouseout="this.color='BLUE';" >A</font></div>
<div style="color:LIME;"><font onmouseover="this.color='PURPLE';" onmouseout="this.color='GREEN';" >BASKETBALL</font></div>

The fiddle, though, looks the most entertaining. Any help or advice would be awesome. Thanks a ton!

I didn't understand much of your problem... If the jsfiddle does what you want, you can just change it for update 'color' instead of 'background', it should work normally for words.

Very close to exactly what would work. I have one hungup, and I think it's my jquery script. Maybe it's the wrong one? How do I change it so that the code works? Thank you so much.

I tried using google's hosted libary, but that didn't work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> via https://developers.google.com/speed/libraries/

<script type="text/javascript" src="http://dl.dropbox.com/u/5739741/OMAR/code/jquery-1.7.1.js"></script>



<style type="text/css">
.colored-word {
    font-weight: bold;
    letter-spacing:9px;
    text-transform:uppercase;
    font-family:arial;
}
</style>

<script type="text/javascript" >
$('.colored-word').mouseover(function () {
    $(this).stop(true).fadeTo(200, Math.random());
}).mouseout(function () {
    $(this).fadeTo(200, Math.random());
    var colors = getRandomColors(); 

    $(this)
        .css("color", colors.textColor)
});

var getRandomColors = function() {
    var r = Math.floor(Math.random()*255),
        g = Math.floor(Math.random()*255),
        b = Math.floor(Math.random()*255);

    return {
        textColor: "rgb("+r+","+g+","+b+")",
    };
};

function getContrastYIQ(r, g, b){
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}
</script>





<span class="colored-word">The</span>
<span class="colored-word">Kid</span>
<span class="colored-word">Who</span>
<span class="colored-word">Found</span>
<span class="colored-word">A</span>
<span class="colored-word">basketball</span>

I wouldn't suggest using external script references.
Just download the jquery file from jquery.com, put in the same folder and use like this:

<script type="text/javascript" src="jquery.1.x.js"></script>

And the jQuery functions used are very basic, I think this would work with 1.6 or higher.

I use blogger, so I have no way to the backdoor of the site. I use dropbox for all my scripts. So how would I get this to work using this basic HTML Editor website: http://htmledit.squarefree.com/ ?

The jquery script I was referencing was 1.7.1 --- Should I try higher? Can you get it to work on the HTML Edit site?

Thank you so much for your time. It's greatly appreciated!

Here's my forked fiddle: http://jsfiddle.net/de1ov2p7/

Don't know why, but the script below worked. I used the jquery source that the fiddle site used found in their source code. Thanks a ton. Marking this as solved.

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>





  <style type='text/css'>
    .colored-word {
    font-weight: bold;
    letter-spacing:9px;
    text-transform:uppercase;
    font-family:arial;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.colored-word').mouseover(function () {
    $(this).stop(true).fadeTo(200, Math.random());
}).mouseout(function () {
    $(this).fadeTo(200, Math.random());
    var colors = getRandomColors();
    $(this)
        .css("color", colors.textColor)
});
var getRandomColors = function () {
    var r = Math.floor(Math.random() * 255),
        g = Math.floor(Math.random() * 255),
        b = Math.floor(Math.random() * 255);
    return {
        textColor: "rgb(" + r + "," + g + "," + b + ")",
    };
};

function getContrastYIQ(r, g, b) {
    var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    return (yiq >= 128) ? 'black' : 'white';
}
});//]]>  

</script>


  <span class="colored-word">The</span><span class="colored-word">Kid</span><span class="colored-word">Who</span><span class="colored-word">Found</span><span class="colored-word">A</span><span class="colored-word">basketball</span>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.