Comment personnaliser et découper Jquery Automatic, Infinate Carousel en tournant le diaporama dans des liens d'image distincts?

Question

J'ai récemment lu les dix meilleures techniques de jquery dans Web designer mag et comme l'effet carrousel sur http://www.struttcouture.com. Mais je voudrais le personnaliser un peu plus. Par exemple, existe-t-il un moyen de découper les images de sorte que différentes sections de chaque image puissent être transformées en liens avec des divs au lieu d'éléments de liste non ordonnés?

Aimerais connaître vos pensées.

Merci Judith

<style> 
    #gallery { 
    padding: 3px; 
    position: relative; 
    margin: auto; 
    height: 674px; 
    width: 994px; 
    overflow: hidden; 
    z-index: 1; 
    padding-left: 1px; 
    } 
    #gallery ul { 
position:relative; 
width:20000px; 
} 
#gallery ul li { 
float:left; 
list-style:none outside none; 
margin-right:2px; 
} 
</style> 
    <script src="scripts/jquery-1.4.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    var item_width; 
    var left_value; 
    $(document).ready(function() { 

    var speed = 5000; 
    var run = setInterval('rotate()', speed);  
    item_width = $('#galleryinner li').outerWidth(); 
    left_value = (item_width/2) * (-1); 
    left_value = left_value-52; 
    $('#galleryinner li:first').before($('#galleryinner li:last')); 
    $('#galleryinner ul').css({'margin-left' : left_value},2000); 

    });  
    function rotate() { 
    var left_indent = parseInt($('#galleryinner ul').css('margin-left')) - item_width; 
    $('#galleryinner ul').animate({'margin-left' : left_indent}, 2000, function() { 
     $('#galleryinner li:last').after($('#galleryinner li:first'));      
     $('#galleryinner ul').css({'margin-left' : left_value}); 
    }); 
    return false; 
    } 

    </script> 
    <div id="gallery"> 

    <div id="galleryinner"> 
     <ul> 
     <li><img src="images/gallery1.jpg" alt="Strutt Couture Shoes" width="520" height="390" border="0" /></li> 
     <li><img src="images/gallery2.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li> 
     <li><img src="images/gallery3.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li> 
     <li><img src="images/gallery4.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li> 
     <li><img src="images/gallery5.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li> 
     <li><img src="images/gallery6.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li> 
     <li><img src="images/gallery7.jpg" width="520" height="390" alt="Strutt Couture Shoes" /></li> 

     </ul> 
    </div> 

Answer 1

Si je comprends bien, votre problème est que vous voulez que chaque entrée sur la page pour avoir des régions sur chaque diapositive qui sont chaud, non?

Chaque entrée <li> ne doit pas nécessairement être une image. Il doit juste être un rectangle uniforme. Vous pouvez mettre tout ce que vous voulez dans ce rectangle: DIVs complexes avec des ancres et des liens et tout ce que vous voulez. Une simple astuce ici serait d'ajouter vide < a href = "..." > est après vos balises IMG et ensuite utiliser CSS pour les faire afficher: bloc, position: absolu, et définir le haut, à gauche, hauteur, largeur et z-index pour positionner ces ancres autrement invisibles au-dessus des parties pertinentes de vos images.