0

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>
2
Contributors
5
Replies
8
Views
3 Years
Discussion Span
Last Post by vizz
0

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

Myscript

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++) {
                alert(word[i]);
            }                


     });

Edited by vizz

0

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?

0
<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>
<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]);
    chosen++;
    if(chosen > lastitem)chosen = 0;
});

Seems to work for me

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.