根据我悬停在上面的按钮移动相同的图像

Question

I have 8 buttons (images) on the page, all in the same line. And one hidden image(red rectangular box) with no text on it. I want to display the same red box just below the button(image) I hover over with dynamic text on the image(which would be according to the link of the button)

HTML Code:

 <div id="imageRings">
    <img id="ringOne" class="rotate" src="images/ring1.png">
    <img id="ringTwo" class="rotate" src="images/ring2.png">
    <img id="ringThree" class="rotate" src="images/ring3.png">
    <img id="ringFour" class="rotate" src="images/ring4.png">
    <img id="ringFive" class="rotate" src="images/ring5.png">
    <img id="ringSix" class="rotate" src="images/ring6.png">
    <img id="ringSeven" class="rotate" src="images/ring7.png">
    <img id="ringEight" class="rotate" src="images/ring8.png">
    </div>

So these are the images on which when I hover I want an image to appear just below the respective image I hover over, and text on it depending on the link(i mean i should be able to modify the text displayed on the rectangular box)

I know I haven't given much code to begin with but I dont know what else to provide. All I am missing from the above code is the code of rectangular box image, but I havent written it anywhere as the position is what needs to determined and changed according to the hovering.

Answer 1

Try this; place your images in an inline <li> , then you can append that .rect div to each one on hover. Here's a jsFiddle for an example as well.

HTML

<ul id="imageRings">
    <li><img class="rotate" src="images/ring1.png"></li>
    <li><img class="rotate" src="images/ring2.png"></li>
    <li><img class="rotate" src="images/ring3.png"></li>
    <li><img class="rotate" src="images/ring4.png"></li>
    <li><img class="rotate" src="images/ring5.png"></li>
    <li><img class="rotate" src="images/ring6.png"></li>
    <li><img class="rotate" src="images/ring7.png"></li>
    <li><img class="rotate" src="images/ring8.png"></li>
</ul>
<div class="rect"></div>​

jQuery

$('imageRings img').on({
    mouseenter: function() {
        $(this).closest('li').append($('.rect'));
        $('.rect').show();
    },
    mouseleave: function() {
        $('.rect').hide()
    }
})​;

CSS

#imageRings li{display:inline-block;}
.rect{border:1px solid red;background:#a55;height:20px;display:none;}​

Answer 2

Put your images in divisions and/or lists as follows

<div id="hover">
<div class="ima 1">
<img src="your_img_1" />
<div class="fill">
</div></div>
<div class="ima 3">
<img src="your_img_2" />
<div class="fill">
</div></div>
<div class="ima 2">
<img src="your_img_3" />
<div class="fill">
</div>
</div></div>

Position as

.ima{
float:left /*Float to make parallel*/
}

img{
display:block;
}

Jquery:

$('.ima img').hover(function(){
$(this).parent().find('.fill').html('<img src="image" />');
},
function(){
$(this).parent().find('.fill').html('  ');
}
);