11540 sujets

JavaScript, DOM et API Web HTML5

JavaScript - Changement image avec effet

Bonjour à tous,

Sur une page Internet, j'ai une image qui est affichée en grand. De plus, 3 images miniatures sont affichées sous cette même image. Quand on clique sur une image miniature, c'est l'image correspondante qui est affiché en grand.

Tout fonctionne très bien. Je souhaiterais savoir s'il était possible de rajouter facilement un joli effet lors du changement d'image (par exemple, un fadeout/fadein).

Je précise qu'il faut que ça soit compatible avec tous les navigateurs Smiley smile

Merci d'avance pour votre aide Smiley smile


Voilà mon code :

Le html :

<!-- Début div ref-visionneuse -->
<div class="ref-visionneuse" -->
    <img src="css/images/ref-projet1-img1.jpg" id="ref-projet-img1" class="ref-img-visible" />
    <img src="css/images/ref-projet1-img2.jpg" id="ref-projet-img2" class="ref-img-hidden" />
    <img src="css/images/ref-projet1-img3.jpg" id="ref-projet-img3" class="ref-img-hidden" />
</div>
<!-- Fin div ref-visionneuse -->


<!-- Début div ref-miniatures -->
<div class="ref-miniatures">
<!-- Miniature 1 - Projet 1 -->
    <div>
        <a href="javascript:imgVisibility('ref-projet-img1')">
            <img src="css/images/ref-projet1-img1-mini.jpg" />
        </a>
    </div>

<!-- Miniature 2 - Projet 1 -->       
    <div class="ref-margin-mini-center">
        <a href="javascript:imgVisibility('ref-projet-img2')">
            <img src="css/images/ref-projet1-img2-mini.jpg" />
        </a>
    </div>

<!-- Miniature 2 - Projet 1 -->
    <div>        
        <a href="javascript:imgVisibility('ref-projet-img3')">
            <img src="css/images/ref-projet1-img3-mini.jpg" />
        </a>
    </div>

</div>
<!-- Fin div ref-miniatures -->


Le CSS :

.ref-img-visible{
    visibility: visible;
    display: inline;
    }

.ref-img-hidden{
    visibility: hidden;
    display: none;
    }



Et le code JavaScript :

// Méthode pour changer la visiblité d'une image
function imgVisibility(imgId) {

// Cache toutes les images
document.getElementById('ref-projet-img1').className = 'ref-img-hidden';
document.getElementById('ref-projet-img2').className = 'ref-img-hidden';
document.getElementById('ref-projet-img3').className = 'ref-img-hidden';

// Afficher l'image cible
var mypic = document.getElementById(imgId);
mypic.className = 'ref-img-visible';
}
Salut,

Utilises JQuery, ça te simplifieras la vie :

$("liste-d-image").click(function(e){

e.preventDefault();
var path = $(this).attr('src');
$("[grande-image]").fadeOut().attr('src',path).fadeIn();

});
Sujet clos
Aller à