Now see updated code for multiple div
<div>
<img class="parent " src="image.jpg"" data-pos = '0' />
<div>
<img class="img" style="display:none" src="image1.jpg"" />
<img class="img" style="display:none" src="image2.jpg"" />
<img class="img" style="display:none" src="image3.jpg"" />
<img class="img" style="display:none" src="image4.jpg"" />
<img class="img" style="display:none" src="image5.jpg"" />
</div>
<div>
<hr>
<div>
<img class="parent " src="image.jpg"" data-pos = '0' />
<div>
<img class="img" style="display:none" src="image1.jpg"" />
<img class="img" style="display:none" src="image2.jpg"" />
<img class="img" style="display:none" src="image3.jpg"" />
<img class="img" style="display:none" src="image4.jpg"" />
<img class="img" style="display:none" src="image5.jpg"" />
</div>
<div>
and Jquery for it is
$(document).ready(function(){
var pos = 0;
$('.parent').bind('mouseover',function(){
pos = $(this).data('pos');
$(this).next('div').find('.img').eq(pos%5).show();
$(this).hide();
pos++;
$(this).data('pos',pos);
});
$('.img').bind('mouseout',function(){
$(this).hide();
$('.parent').show();
});
});
----------------------------- Below Was Old Answer --------------------
Use following HTML code
<div>
<img class="parent " src="image.jpg" />
<img class="img" style="display:none" src="image1.jpg" />
<img class="img" style="display:none" src="image2.jpg" />
<img class="img" style="display:none" src="image3.jpg" />
<img class="img" style="display:none" src="image4.jpg" />
<img class="img" style="display:none" src="image5.jpg" />
</div>
<div>
And this jQuery stuff
$(document).ready(function(){
var pos = 0;
//hide parent image and show one of the child image
$('.parent').bind('mouseover',function(){
$('.img').eq(pos%5).show();
$(this).hide();
pos++;
});
//hide child images and show parent image
$('.img').bind('mouseout',function(){
$('.img').hide();
$('.parent').show();
});
});
here is fiddle