multiple mousehover with jquery?

Question

Hi there!

Let's say I have a div with a backgroundimage (my logo) and I need this div to be switched with other 4 divs which are the same image but with other colours. Each image will be called on a mousehover using a jquery effect so it shows up smoothly, the order will be div1,2,3,4,5 and then restarts.

An easier explanation would be..a logo that has 5 diferent colored background and each background color will be shown when you pass your mouse over the logo, like if you pass it the first time it'll be green but if u pass your mouse over the logo again it will be blue and so on.

Now as a completely newbie on javascript and jquery...how can I achieve this? can someone guide me trough some tutorial or specific article or maybe give me a snip if code to start with? I've tried to ask this before and someone answered with a snip of code that would be a variable (a counter to be exactly) but I didn't really understand how it worked and how to implement it...

Answer 1

Something along these lines:

$(document).ready(function() {
    var colours = ['blue','green','red','orange'];
    var colIndex = 0;

    $('#logo').mouseover(function() {
        if(colIndex > colours.length) {
            colIndex = 0;
        }
        $(this).attr('src', colours[colIndex] + '-logo.jpeg');
        colIndex++;
    });
});

• Initialize an array, setting its elements to the string prefixes of the various logo image files.
• Initialize a counter to zero, so we don't have to do any math to use it as an array offset.
• When the mouse moves over the logo image, change the image's source to the string stored at colours[colIndex]. In my example I have concatenated the last part of the filename, assuming the convention [colour name]-logo.jpeg. You could just as well put the entire filename in the array and not follow any convention.

Answer 2

I believe that your desire is a bit more complicated than the other answer posted meets -- you want the images to fade smoothly. This code creates a div within a div, and then, on mouseover, shows the internal (and therefore topmost) div, changes the background of the lower (outermost) div to the next one in the cycle, and then fades out the upper image. It also has a selective lockout mechanism, so if the user goes crazy with the mouse, it won't make the image flicker in an ugly way. I hope this helps, and if you want a deeper explanation of the code's functionality (you should be able to read it, mostly) post so in the comments.

This code has thee parts.

Javascript:

var pos = 0, lockOut = 0;
var fade = 600; // change this if you like (in MS)
// fix these div names
var top = '#my-transitional-div', bottom = '#my-permanent-div';
var images = [ // fix these paths
    'http://example.com/1.png',
    'http://example.com/2.png',
    'http://example.com/3.png',
    'http://example.com/4.png',
    'http://example.com/5.png'
];
$(document).ready(function() {
    $(top).hide();
    $(bottom).css("background-image",'url(' + images[pos] + ')');
    $(bottom).live("mouseover",changeOut);
    pos = images.length;
    changeOut();
});

function changeOut() {
    if (++lockOut > 1) {
        lockOut--;
        return;
    }
    $(top).css("background-image",'url('+images[pos-1]+')').show().fadeOut(fade);
    if (pos >= images.length) pos = 0;
    $(bottom).css("background-image",'url('+images[pos++]+')');
    setTimeout(function(){lockOut--;},fade-10);
}

CSS:

/* fix these div names (also height, width) */
#my-transitional-div {
 width: 500px;
 height: 250px;
 margin: 0;
 padding: 0;
 position: absolute;
 left: 0;
 top: 0;
}
#my-permanent-div {
 position: relative;
 width: 500px;
 height: 250px;
 margin: 0;
 padding: 0;
}

HTML:

<div id="my-permanent-div">
    <!-- notice that the "transitional" div (var=top) is INSIDE the other -->
    <div id="my-transitional-div"></div>
</div>

Answer 3

You could simply make your logo a gif/png with transparency and set it as the background and then animate the backgroundColour css attribute between these values (building off the previous script):

$(document).ready(function()
{
    var colours = ['blue','green','red','orange'];
    var colIndex = 0;

    $('#logo').mouseover(function()
    {
        if(colIndex > colours.length)
            colIndex = 0;

        $(this).css('backgroundColour', colours[colIndex]);
        colIndex++;
    });
});

Answer 4

Hey Dereleased. It's an absolute div with top and left fields =( here's the code:

Javascript logo.js:

var pos = 0, lockOut = 0;
var fade = 600; // change this if you like (in MS)
// fix these div names
var top = 'div#my-transitional-div', bottom = 'div#my-permanent-div';
var images = [ // fix these paths
    'images/button_hover_blue.png',
    'images/button_hover_yellow.png',
    'images/button_hover_green.png',
    'images/button_hover_pink.png',
    'images/button_hover_orange.png'
];
$(document).ready(function() {
    $(top).hide();
    $(bottom).css("background-image",'url(' + images[pos] + ')');
    $(bottom).live("mouseover",changeOut);
    pos = images.length;
    changeOut();
});

function changeOut() {
    if (++lockOut > 1) {
        lockOut--;
        return;
    }
    $(top).css("background-image",'url('+images[pos-1]+')').show().fadeOut(fade);
    if (pos >= images.length) pos = 0;
    $(bottom).css("background-image",'url('+images[pos++]+')');
    setTimeout(function(){lockOut--;},fade-10);
}

CSS main.css:

html{
    height:100%;
}
body
{
    height:100%
    margin: 0;
    padding: 0;
    text-align: center;
    background-image:url(../images/bg.png);
    background-repeat:repeat;

}

div#container 
{
    background-image:url(../images/bg.png);
    text-align: left;
    margin: auto;
    width: 760px;
    height:100%;
    min-height:100%;
    background-repeat:repeat;
    position:relative;
} 
div#logo{
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:12;
}
div#my-transitional-div {
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
}
div#my-permanent-div {
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
}

HTML index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>om</title>
<script type='text/javascript' src='js/effects/logo.js'></script>
</head>

<body>
    <div id="container">
     <div id="logo"></div>
        <div id="my-permanent-div">
      <div id="my-transitional-div"></div></div>
</div>
</body>
</html>