Créer une page web avec des images qui apparaissent Fermé

Question

Bonjour, Je tente de faire une page web avec Dreamweaver CS6.

Ma page est séparé en trois. Une liste de nom chaque coté et une image au centre.

Je veux que en cliquant sur un des mots des cotés, l'image correspondante à ce mot apparaisse dans le centre de ma page. J'ai déjà préparé toutes les images pour quelles soit de la même dimension.

Merci à l'avance


Configuration: Windows 7 / Firefox 16.0

Dj Nam · Answer

Bonjour,

Idéalement pour répondre à cette problématique il faudrait que tu saches programmé en Javascript (et le mieux serait de se servir de la librairie jQuery).

Voici des pistes de recherches pour pouvoir réaliser ce que tu désires :
La première étape consiste à télécharger et charger jQuery sur ta page : https://jquery.com/ 

Ensuite, voici l'idée que je te propose :
il faut définit l'attribut "id" de tous tes liens (en gardant bien à l'esprit que la page ne doit en aucun cas contenir deux fois le même id)
Ensuite tu affiche toutes tes images les unes en dessous des autres, avec l'attribute "class" égale à l'attribut "id" du lien correspondant.

Ensuite, en CSS tu masque toutes les images par défaut

Puis, en javascript il faut :
Par défaut, afficher la première, pour cela renseigne toi sur le sélecteur ":first" de jQuery.

Ensuite, au clic sur un lien, tu masque toutes les images puis affiche l'image dont la classe est égale à l'id du lien cliqué, pour t'aider un peu plus voici comment faire :
$('a').click(function() {
    if ($('img.'+$(this).attr('id')).length == 1) {
        $('img'+$(this).attr('id')).show();
    }
});

Voilà qui devrait t'aider. Sur le site de jQuery que j'ai cité ci-dessus tu trouvera une très bonne documentation, très complète.
Si jamais tu as la moindre question, n'hésite pas.

Créer une page web avec des images qui apparaissent

1 réponse

Discussions similaires