When mouse is on image display one value from array inside thought div's span. Show next value each time. When values ends start with first value

something like this , but when hover on image

 var arrValues = [ "one", "two", "three" ];

 <img src="images/thinker.png" />

 <div class="thought"><span></span></div>
Member Avatar

I think you need to explain this better.

I have array of items

var items = [ "One", "Two", "Three", "Four", "Five", "Six"]

there is div containing span

<div class="thought"><span></span></div>

there is image

<img src="images/thinker.png" />

NOW I want to do following
When mouse pointer is on image for first time, show one inside <span></span> when mouse pointer is out, hide value, when second time mouse pointer is on image show two, like this when sixth time mouse pointer is on image show "Six" And when seventh time mouse pointer is on image start loop again from value one


var text ="one, two, three, four, five, six";
var word = text.split(',');

$('.thinkerImg').stop(true).mouseenter(function () {

    for(var i=0; i<word.length; i++) {


I added $text.html( word[i] ); $text.dequeue(); after alert() then I got only one value every time i.e. one

How to start queue again?

Member Avatar
<div class="thought"><span></span></div>
<img id="mousey" src="IMAG0199.jpg" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
var items = ["one","two","three","four","five","six"];
var chosen = 0;
var lastitem = (items.length - 1);
$('#mousey').mouseenter(function(e) {
    $('.thought span').html(items[chosen]);
    if(chosen > lastitem)chosen = 0;

Seems to work for me


it worked