Flashing images

I have dynamic images from a database ... I want to have a couple of images on top of each other ... for example an ad, when one image disappears, the other displays ...

When you click on an image, it should be redirected to a specific link

0


a source to share


1 answer


This solution uses jQuery and jQuery Loop Plugin . It basically runs it like a slideshow, displaying one image at a time. The CSS puts a nice border around it, but you can fix that by tweaking the CSS. The loop plugin has several parameters that you can use to customize how images transition.



<style>
.pics
{
    padding: 0;
    margin: 0;
    margin-left: 48px;
}

.pics img
{
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
    top: 0;
    left: 0;
}
</style>
<script type="text/javascript">
    $(function() {
       $(window).load( function() { $(".pics").cycle() } );
    });
</script>

<div class="pics">
     <img alt="Banner Ad" onclick="location.href='/url/to/ad-site1.htm';" src="/url/to/img1.jpg" />
     <img alt="Banner Ad" onclick="location.href='/url/to/ad-site2.htm';" src="/url/to/img2.jpg" style="display: none;" />

     <img alt="Banner Ad" onclick="location.href='/url/to/ad-site3.htm';" src="/url/to/img3.jpg" style="display: none;" />
</div>

      

+3


a source







All Articles