Continually Change Text Color onmouseover

[jonsan32]

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!

[AleMonteiro]

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.

[AleMonteiro]

Anyway, I played a little with that fiddle and came up with this: http://jsfiddle.net/L4nqhudr/1/

Is that what you want?

[jonsan32]

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>

[AleMonteiro]

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.

[jonsan32]

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/

[jonsan32]

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>