javascript - Image mask over Nivo Slider - Stack Overflow

admin管理员组

文章数量:1287651

I'm using Nivo slider, but want to place a PNG image over the slider so it only shows through the parts that are transparent. What would be the best way to do this using JavaScript or CSS?

I'm using Nivo slider, but want to place a PNG image over the slider so it only shows through the parts that are transparent. What would be the best way to do this using JavaScript or CSS?

• javascript
• css
• slider
• image-rotation
• nivo-slider

Share Improve this question Follow edited May 5, 2011 at 2:30 NakedBrunch 49.4k1414 gold badges7474 silver badges9898 bronze badges asked Apr 26, 2011 at 19:46 GavinRGavinR 6,24477 gold badges3535 silver badges4444 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7 +50

Change the demo using the code below to see how this can be done. There are a lot of ways to do this so you should figure out what works best for your situation. The code below wraps the slider and another relatively placed image inside of the same div. A bit of CSS is used to position the the image and you can see the effect in action.

HTML

<div id="outer-wrapper">

            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios."><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="slider-mask"></div>
</div>  

CSS

#outer-wrapper {
    width:618px;
    height:246px;
    margin-left:190px;
}

#slider-mask {
    position:relative;
    background:url(images/mask.png) no-repeat;
    width:618px;
    height:246px;
    top:-246px;
    left:0;
    z-index:100;
}

Image Used

Screenshot of the effect

look this slider (example).

Just set the PNG to be absolute positioned and move it over top of the nivo slider. Make sure that the z-index is set to be above the slider.

absolute positioned divs when placed with in relative positioned div than they give your required result.

position your nivo slider container as relative positioned and put the mask div within the nivo slider container and position that absolute.

hope it will help you

I had the same task from my designer, meaning to place some mask over the animations.

This was the easy part !!! The plicated part was to:

• make links work again
• to have back animation pause on mouse over them;
• to place the controlNav buttons over the image and also make them work...

So, I had to develop and use this (done by me, and explained in detail over there):

• http://support.dev7studios./discussions/nivo-slider/1371-moving-controlnav-outside-slider-on-a-separate-container-wrapper
• http://support.dev7studios./discussions/nivo-slider/1375-trick-adding-custom-layer-for-anchors-on-images-pletely-outside-the-slider

Maybe this will help others in the future ;)

Razvan

本文标签： javascriptImage mask over Nivo SliderStack Overflow