Aide Dreamweaver

Fermé
lesdeuxmi Messages postés 16 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 8 décembre 2015 - 7 déc. 2015 à 14:38
lesdeuxmi Messages postés 16 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 8 décembre 2015 - 8 déc. 2015 à 18:45
Bonjour à tous.
J'ai un site perso que je fais avec Dreamweaver et dans lequel j'ai un zoom sur image qui fonctionne très bien au survol de la souris, mais j'aimerai qu'il fonctionne à partir d'un clic. Je cherche depuis plusieurs jours des tutos ou des exemples de codes sans trouver ce qu'il me faut.
Merci pour votre participation - MZR

Je vous joint un extrait de mon code pour tenter de m'aider.
<head>
<style>
.zoom {
text-aling:center;
}
.zoom img {
transition:all 0.5s ease;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
position:absolute;
width:356px;
height:211px;
margin-left: 300px;
left: 50%;
top: 300px;
visibility: visible;
}
.zoom img:hover {
width:1047px;
height:620px;
margin-left: -500px;
left: 50%;
top: 10px;
}
</style>
</head>

<body>
<div class="zoom"><img src="Mon image.png" id="ImageZoom"/></div>
</body>

3 réponses

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
7 déc. 2015 à 18:43
Bonjour,
Pour une action au clic, tu est obligé de te tourner vers du javascript (ou jquery).
Tu devrait donc trouver sur google en tapant "javascript zoom au clic"
0
lesdeuxmi Messages postés 16 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 8 décembre 2015
8 déc. 2015 à 08:53
Merci Nhay, pour l'intérêt que tu portes à mon petit problème.
Je connais "un peu" jquery mais là, je voulais passer outre pour progresser en programmation. Peut-être peut-on poursuivre en javascript sans jquery ?
Merci encore pour ton attention, à bientôt peut être - MZR
0
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
8 déc. 2015 à 12:56
Oui, tu peut le faire en JS tout simple.
Ce code :
<script>
var element = document.getElementsByClassName("zoom");
element.addEventListener('click', function() {
document.body.classList.toggle('click');
}, false);
</script>

Devrait surement convenir (Je n'ai pas testé par contre)
Il est censé ajouter/retirer la class .click à tes éléments zoom
Tu peut ensuite faire le reste en css
0
lesdeuxmi Messages postés 16 Date d'inscription lundi 11 mars 2013 Statut Membre Dernière intervention 8 décembre 2015
8 déc. 2015 à 18:45
Bon...! J'ai inséré ton nouveau code, mais ça ne fonctionne pas. Ce qui me fais peur, c'est ta dernière phrase: <Tu peux ensuite faire le reste en css>.
je ne comprends pas grand-chose à tout ça, je crois que je vais revenir à ma première idée en utilisant jquery.
En tout cas, un grand merci pour ton aide - MZR
0