Problème pour faire tourner une image JS

Fermé

spylller Messages postés 395 Date d'inscription dimanche 1 mars 2015 Statut Membre Dernière intervention 11 juillet 2019 - 19 oct. 2016 à 20:08
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 19 oct. 2016 à 21:43

Bonjour,
J'ai un problème, mon code pour faire tourner une image ne marche pas :

<body>
      	<img id="image"src="images/image.png"/>

      	<script src="jquery/jquery.js"></script>
      	<script>

			var angle = 0;
			$('#image').click(function() {
			    angle += 15;
			    $("#image").rotate(angle);
			});

		</script>
      </body>

Pourquoi ?
Merci !

A voir également:

Faire tourner une image sur elle même gif
Image iso - Guide
Comment faire un gif - Guide
Tourner l'écran - Guide
Comment agrandir une image - Guide
Acronis true image - Télécharger - Sauvegarde

2 réponses

Réponse 1 / 2

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
19 oct. 2016 à 20:53

Bonsoir.

Premiere raison rotate() n'existe pas comme fonction jquery
$("#image").rotate(angle);

deuxième raison tu confond les portées des variables.
Il faut utiliser le css (de niveau 3 il me semble)

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
	<style>
		img{
			width: 200px;
			height: 200px;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
	<script>
	$( document ).ready(function() {
		$('img').click(function() {
			$(this).css("transform", "rotate(15deg)");
		});
	});
	</script>
</head>
	<body>
      	<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5phLRQNnkgMvPsVOKW5LPMwzxuZR+IzViWMsHKlTlWA7ZyF5/SopE/elsAr5gYe4ximSV5WYqxUkfIvT8KR9/m9yfMHanGNtpHfYB+uakKHcSBzvLfpikBZL/AChcjgDg9ahdix9+n0p7HcNw59/WopAeuOpzTAO4NP7gmmISRyMGlVyG6d+lID//2Q=="/>
     </body>
</html>

spylller Messages postés 395 Date d'inscription dimanche 1 mars 2015 Statut Membre Dernière intervention 11 juillet 2019 28
19 oct. 2016 à 20:56

Ah, car j'avais vu rotate() sur un forum, comme quoi faut toujours faire gaffe.
Merci beaucoup !

Réponse 2 / 2

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
19 oct. 2016 à 21:43

Encore un autre script pour faire tourner l'image plusieurs fois a chaque clics

	var valeurDeg = 0;
	var angle = 15;
	
	$( document ).ready(function() {
		$('img').click(function() {
			
			window.valeurDeg += window.angle;
			var valeurDeg = window.valeurDeg;
			
			$(this).css("transform", "rotate("+valeurDeg+"deg)");
		});
	});

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Sur la plage...

Dechiffrer une image caché

Discussions similaires

Newsletters