Aide Dreamweaver
lesdeuxmi
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
lesdeuxmi Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
lesdeuxmi Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
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"
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
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 :
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
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
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