CODEWITHSUNDEEP
jquerymouseover
Gary Boutwell
Gary Boutwell

Reputation: 13

mouse over image swap

I need help with a mouse-over issue.

In the div container, I have three images side-by-side. I need to have a image swapped that covers the entire area of the three images when the users mouse hovers over any three of the images.

Each time the user hovers over one of the three images, I need to have one of the large images replace the smaller image. The images are here:

So, if the user hovers over the image labeled "engage: then the large "engage" image will show up where all three images are. Same for the other two images.

Here is the code: http://jsfiddle.net/GaryBoutwell/QzbSQ/

<div align="center">
<div id="multiple" class="swap">
<img class="left" src="http://www.delphidisplay.com/NewDesign/img/image1.jpg" />
<img src="http://www.delphidisplay.com/NewDesign/img/image2.jpg" />
<img class="right" src="http://www.delphidisplay.com/NewDesign/img/image3.jpg" />
</div>
<div id="single" class="swap">
<img src="http://www.delphidisplay.com/NewDesign/img/image1-1.jpg" />
</div>



$('.swap').hover(function () {
    $('.swap').toggle();
});
.swap {
    width: 893px;
}
#multiple {
    text-align: center;
}
#single {
    display: none;
}
.left {
    float: left;
}
.right {
    float: right;
}

I hope I explained it enough,

Thanks,

Gary

Upvotes: 0

Views: 434

Answers (1)

egbrad
egbrad

Reputation: 2407

Put the big image in a separate container with the same size as the container with the three images, and then toggle the visibility of the containers when you hover over either of them.

$('.swap').hover(function(){
    $('.swap').toggle();
});

FIDDLE

Upvotes: 1

Related Questions