Question

You can see the implementation here.

When you hover over any of the two big images, you see a little ‘menu’ set of icons appear. They are absolutely positioned right now.

I want them to function like a menu – so when you hover over the image, they appear to the top right of each of the images, i.e. when you hover over the left image, it appears in the top right corner of the left image, and when you hover over the right image, it does the same.

Also note that the images are on a carousel, so when you click next, the menu should disappear and you should get the menu on the next image that shows up too. Also why are those black dots appearing, is it because the images are list items?

How do I get rid of them?

Also, when you hover over the menu, it shouldn’t flicker like it does now – and should allow me to be able to customize it like a menu (i.e. when they hover over each of the images, I can do an image swap to make it feel like a menu (even after one of the icons/buttons has been pressed).

Here is the requisite code….HTML:

<div id="slider-code">
    <a class="buttons prev" href="#"></a>
    <div class="viewport">
        <ul class="overview">           
            <li><img src="images/red-stripe.jpg" /></li>
            <li><img src="images/red-stripe-bw.jpg" /></li>
            <li><img src="images/red-stripe-red.jpg" /></li>            
            <li><img src="images/red-stripe-dark.jpg" /></li>
            <li><img src="images/red-stripe.jpg" /></li>
            <li><img src="images/red-stripe-red.jpg" /></li>
            <li><img src="images/red-stripe-dark.jpg" /></li>           
        </ul>

        <div id="edit-image-nav">
            <ul>
                <li><img src="images/comment-icon.png" /></li>
                <li><img src="images/paint-icon.png" /></li>
                <li><img src="images/delete-icon.png" /></li>
            </ul>
        </div>

    </div>
    <a class="buttons next" href="#"></a>
</div>

CSS:

#edit-image-nav {
    display: none;
}

#edit-image-nav ul {
    display: inline;    
    margin: 20px 0 auto; /* top, right, bottom, left */
    position: absolute; 
    z-index: 200;   
}

#edit-image-nav ul li {
    float: left;
}

JS

$(document).ready(function() {
    $("#slider-code .viewport .overview img")
        .hover(function() {
            $("#edit-image-nav").css({ 'display' : 'inline' });
        }, function() {
            $("#edit-image-nav").css({ 'display' : 'none' });
    });

});

Thanks.

Answer 1

Something like this might work for you: Example

JavaScript used:

$('.overview li').mouseenter(function() {
    $(this).append($('#tool'));
    $('#tool').css('display', 'block');
}).mouseleave(function() {
    $('#tool').css('display', 'none');
});

HTML used:

<ul class="overview" >            
    <li><img src="http://fiwishop.com/feedback/images/red-stripe.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-bw.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-red.jpg" ></li>                
</ul>

<div style="clear:both"></div>
<div id="tool">[ ] [_] [X]</div>

CSS used:

.overview li{
    width:200px;
    height:135px;
    background-color:#666;
    float:left;
    margin:10px;
}
.overview li img{
    width:200px;
    position:absolute;
}
#tool{
    width:75px;
    background-color:#eee;
    display:none;
    position:relative;
    left:120px;
    top:5px
}