Aide Dreamweaver
lesdeuxmi
Messages postés
22
Statut
Membre
-
lesdeuxmi Messages postés 22 Statut Membre -
lesdeuxmi Messages postés 22 Statut Membre -
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>
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
-
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" -
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-
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
-
-
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
