Partage

Nombre entre -10 et 10 au hasard

Varier le nombre de degré d'un angle

Sujet résolu

14 mai 2010 à 21:45:03

Bonjour,

J'aimerai, avec CSS 3, que lorsque je passe la souris sur un div, celui-ci fait un rotation... Jusque là, j'y arrive. Le problème, c'est que j'ai envie que chaque div aie une rotation différent, voir qu'à chaque passage de souris, la rotation change.

Je ne sais pas si il est préférable d'utiliser Ajax ou le JavaScript.

Je ne développe pas JS ni Ajax et j'ai déjà fait plusieurs tests, mais je ne suis pas arrivé à un résultat concluant. C'est pour cela que je viens vous demander de l'aide...

Merci d'avance pour votre aide,
Maxi-ManG

fayçall

14 mai 2010 à 21:58:39

Ajax ? je vois pas en quoi ajax à avoir la dedans, tu confonds tout j'ai l'impression ...
de plus ajax c'est pas un langage, ajax fait partis de javascript.

si tu veux faire un nombre au hasard : Math.random()
http://www.toutjavascript.com/referenc [...] e.php?iref=12

edit : A TESTER (entre -10 inclus et 10 inclus)

function random(min, max){
   return Math.random()*(max-min) + min
}
var angle = random(-10, 10);

maxi-mang

14 mai 2010 à 22:05:51

A bah c'est bien possible que je confonde tout

!

Durant mes tests, j'avais créé une variable :

nbr = Math.round(Math.random()*10);

Mais après, comment l'utiliser dans style="" ?

Dolerho

14 mai 2010 à 22:07:38

Si tu veux faire ça en CSS, il faut à mon avis que le style soit généré par PHP par exemple, où tu mettras ici ta fonction aléatoire.

Est-il seulement possible d'attribuer l'angle généré au style ?

fayçall

14 mai 2010 à 22:16:40

d'abord un onmouseover sur le div intéresser et on appelle la fonction qui va lui changer son angle, en passant "this" en paramètre évidemment ...

on tire un nombre au hasard entre -10 et 10 avec la fonction random que je t'ai mit
on met l'angle dans les 4 propriétés css parce que css 3 c'est pas encore au point sur les navigateurs, par contre sur ie ce code ne marchera jamais ... (c'est comme border-radius par exemple ...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
        <!--
        function random(min, max){
           return Math.random()*(max-min) + min
        }
        function mettre_angle(elmt){
            //on cree l'angle
            var angle = random(-10, 10);

            //on applique l'angle
            elmt.style.MozTransform = 'rotate('+ angle +'deg)'; //Mozilla
            elmt.style.transform = 'rotate('+ angle +'deg)'; //Css 3
            elmt.style.WebkitTransform = 'rotate('+ angle +'deg)'; //Chrome et Safari
            elmt.style.OTransform = 'rotate('+ angle +'deg)'; //Opera
        }
        //-->
        </script>
    </head>
    <body>
        <div onmouseover="javascript:mettre_angle(this);" style="background-color : red;">1 ere div</div>
        <div onmouseover="javascript:mettre_angle(this);" style="background-color : blue;">autre div</div>
    </body>
</html>

maxi-mang

14 mai 2010 à 23:08:52

Citation : Dolerho

Si tu veux faire ça en CSS, il faut à mon avis que le style soit généré par PHP par exemple, où tu mettras ici ta fonction aléatoire.

Est-il seulement possible d'attribuer l'angle généré au style ?

Pour moi, ça aurait été plus simple en PHP, mais après, il fallait pouvoir générer à chaque passage de souris un nombre, sinon, bah généré un angle par entrée dans la table, mais ça fait moche (niveau code)...

@fayçall : C'est ce que je voulais, MERCI BEAUCOUP ! Juste, dès qu'on enlève la souris, le div garde la rotation... Il n'y a pas un moyen pour que le div reprenne un angle égale à 0° après ?

fayçall

14 mai 2010 à 23:23:13

Citation : maxi-mang

Citation : Dolerho

Si tu veux faire ça en CSS, il faut à mon avis que le style soit généré par PHP par exemple, où tu mettras ici ta fonction aléatoire.

Est-il seulement possible d'attribuer l'angle généré au style ?

Pour moi, ça aurait été plus simple en PHP, mais après, il fallait pouvoir générer à chaque passage de souris un nombre, sinon, bah généré un angle par entrée dans la table, mais ça fait moche (niveau code)...

@fayçall : C'est ce que je voulais, MERCI BEAUCOUP ! Juste, dès qu'on enlève la souris, le div garde la rotation... Il n'y a pas un moyen pour que le div reprenne un angle égale à 0° après ?

si :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
        <!--
        function random(min, max){
           return Math.random()*(max-min) + min
        }
        function mettre_angle(elmt, min, max){
            //on cree l'angle
            var angle = random(min, max);

            //on applique l'angle
            elmt.style.MozTransform = 'rotate('+ angle +'deg)'; //Mozilla
            elmt.style.transform = 'rotate('+ angle +'deg)'; //Css 3
            elmt.style.WebkitTransform = 'rotate('+ angle +'deg)'; //Chrome et Safari
            elmt.style.OTransform = 'rotate('+ angle +'deg)'; //Opera
        }
        //-->
        </script>
    </head>
    <body>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : red;">1 ere div</div>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : blue;">autre div</div>
    </body>
</html>

maxi-mang

15 mai 2010 à 10:13:46

Citation : fayçall

Citation : maxi-mang

Citation : Dolerho

Si tu veux faire ça en CSS, il faut à mon avis que le style soit généré par PHP par exemple, où tu mettras ici ta fonction aléatoire.

Est-il seulement possible d'attribuer l'angle généré au style ?

Pour moi, ça aurait été plus simple en PHP, mais après, il fallait pouvoir générer à chaque passage de souris un nombre, sinon, bah généré un angle par entrée dans la table, mais ça fait moche (niveau code)...

@fayçall : C'est ce que je voulais, MERCI BEAUCOUP ! Juste, dès qu'on enlève la souris, le div garde la rotation... Il n'y a pas un moyen pour que le div reprenne un angle égale à 0° après ?

si :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
        
        </script>
    </head>
    <body>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : red;">1 ere div</div>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : blue;">autre div</div>
    </body>
</html>

Merci infiniment mais il y a encore 2 petits détails qui me dérange : les angles entre 2 et -2 ne donnent pas beaucoup d'effet, j'aimerai les bannir (faire une condition pour y ajouter 2 par exemple) et j'aimerai que lorsque je passe la souris sur le div, seul l'image fait une rotation (il faut changer this pour y mettre quoi ?)...

En tout cas, déjà MERCI pour ces quelques lignes ;D !

fayçall

15 mai 2010 à 10:27:42

j'ai pas très bien compris, mais je pense que c'est ça:
Sinon pour l'image la je comprend pas, parce que il faut que je sache comment est fait ton code, elle est ou l'image ? dans la div ? il y a qu'une seul ? plusieurs ? ... ?

mais pour l'angle :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
        <!--
        function random(min, max){
           return Math.random()*(max-min) + min
        }
        function mettre_angle(elmt, min, max){
            //on cree l'angle
            var angle = random(min, max);
            
            if(angle < 4 && angle >= 0 && max >= 4)
                angle = 4
            else if(angle > -4 && angle < 0 && min <= -4)
                angle = -4
            
            //on applique l'angle
            elmt.style.MozTransform = 'rotate('+ angle +'deg)'; //Mozilla
            elmt.style.transform = 'rotate('+ angle +'deg)'; //Css 3
            elmt.style.WebkitTransform = 'rotate('+ angle +'deg)'; //Chrome et Safari
            elmt.style.OTransform = 'rotate('+ angle +'deg)'; //Opera
        }
        //-->
        </script>
    </head>
    <body>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : red;">1 ere div</div>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : blue;">autre div</div>
    </body>
</html>

maxi-mang

15 mai 2010 à 12:09:38

Citation : fayçall

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
        <!--
        function random(min, max){
           return Math.random()*(max-min) + min
        }
        function mettre_angle(elmt, min, max){
            //on cree l'angle
            var angle = random(min, max);
            
            if(angle < 4 && angle >= 0 && max >= 4)
                angle = 4
            else if(angle > -4 && angle < 0 && min <= -4)
                angle = -4
            
            //on applique l'angle
            elmt.style.MozTransform = 'rotate('+ angle +'deg)'; //Mozilla
            elmt.style.transform = 'rotate('+ angle +'deg)'; //Css 3
            elmt.style.WebkitTransform = 'rotate('+ angle +'deg)'; //Chrome et Safari
            elmt.style.OTransform = 'rotate('+ angle +'deg)'; //Opera
        }
        //-->
        </script>
    </head>
    <body>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : red;">1 ere div</div>
        <div onmouseover="javascript:mettre_angle(this, -10, 10);" onmouseout="javascript:mettre_angle(this, 0, 0);" style="background-color : blue;">autre div</div>
    </body>
</html>

C'est ce que je voulais...

Mon code :

<div id="site" onmouseover="javascript:angle(this, -15, 15);" onmouseout="javascript:angle(this, 0, 0);">
	<a href="site.php?id=id">
		<img src="images/mnom1.png" alt="Nom du site" /><br />
		Nom du site
	</a>
</div>

Je voudrai que ce soit seulement l'image qui subisse la rotation, et pas le lien, mais j'aimerai que la rotation se fasse aussi lorsqu'on passe sur le lien... J'ai essayé avec document.getElementById en donnant un ID à l'image, sauf qu'après, il n'y a que la première image qui bouge...

fayçall

15 mai 2010 à 13:10:07

je suis pas sur d'avoir compris mais essaye ça (j'ai rajouter des truc mais c'est à cause du bubbling( http://www.quirksmode.org/js/events_mouse.html ) (j'ai testé chez moi et ça marche):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>rotation image</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <script type="text/javascript">
        <!--
		function checkMouseOver(evt, element){ //Vérifier s'il y a bien eu un onmouseover ou pas
			if (!evt) var evt = window.event;
			var srcElement = evt.relatedTarget || evt.fromElement;
			if(srcElement == undefined) return true; //si la souris vient d'autre part que l'intérieur de la fenêtre et qu'elle est super rapide
			while(srcElement != element && (srcElement.nodeName != 'BODY' && srcElement.nodeName != 'HTML'))
				srcElement = srcElement.parentNode;
			if(srcElement == element) 
				return false;
			return true; /* forcément srcElement != element donc srcElement parent ou plus de element */
		}
		function checkMouseOut(evt, element){ //Vérifier s'il y a bien eu un onmouseout ou pas
			if(!evt) var evt = window.event;
			var toElement = evt.relatedTarget || evt.toElement;
			while(toElement != element && (toElement.nodeName != 'BODY' && toElement.nodeName != 'HTML'))
				toElement = toElement.parentNode;
			if(toElement == element) 
				return false;
			return true; /* forcément toElement != element donc toElement parent ou plus de element */
		}
        function random(min, max){
           return Math.random()*(max-min) + min
        }
        function mettre_angle(evt, elmt, min, max){

            var angle = 0;           
            if(evt.type == 'mouseover' && checkMouseOver(evt, elmt)){
				angle = random(min, max);
				if(angle < max && angle < 4 && angle >= 0)
					angle = 4
				else if(angle > max && angle > -4 && angle < 0)
					angle = -4
			}
			else if(evt.type == 'mouseout' && checkMouseOut(evt, elmt)){}
			else return;
			
			var img = elmt.getElementsByTagName('img')[0];
			
            //on applique l'angle
            img.style.MozTransform = 'rotate('+ angle +'deg)'; //Mozilla
            img.style.transform = 'rotate('+ angle +'deg)'; //Css 3
            img.style.WebkitTransform = 'rotate('+ angle +'deg)'; //Chrome et Safari
            img.style.OTransform = 'rotate('+ angle +'deg)'; //Opera
        }
        //-->
        </script>
    </head>
    <body>
        <div onmouseover="javascript:mettre_angle(event, this, -15, 15);" onmouseout="javascript:mettre_angle(event, this, 0, 0);" style="background-color : red;">
			<a href="site.php?id=id">
			<img src="img.jpg" alt="Nom du site" /><br />
			Nom du site
			</a>
        </div>
    </body>
</html>

si tu comprends pas regarde le lien que je t'ai donner

maxi-mang

15 mai 2010 à 13:33:18

Citation : fayçall

je suis pas sur d'avoir compris mais essaye ça (j'ai rajouter des truc mais c'est à cause du bubbling( http://www.quirksmode.org/js/events_mouse.html ) (j'ai testé chez moi et ça marche):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>rotation image</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <script type="text/javascript">
        <!--
		function checkMouseOver(evt, element){ //Vérifier s'il y a bien eu un onmouseover ou pas
			if (!evt) var evt = window.event;
			var srcElement = evt.relatedTarget || evt.fromElement;
			if(srcElement == undefined) return true; //si la souris vient d'autre part que l'intérieur de la fenêtre et qu'elle est super rapide
			while(srcElement != element && (srcElement.nodeName != 'BODY' && srcElement.nodeName != 'HTML'))
				srcElement = srcElement.parentNode;
			if(srcElement == element) 
				return false;
			return true; /* forcément srcElement != element donc srcElement parent ou plus de element */
		}
		function checkMouseOut(evt, element){ //Vérifier s'il y a bien eu un onmouseout ou pas
			if(!evt) var evt = window.event;
			var toElement = evt.relatedTarget || evt.toElement;
			while(toElement != element && (toElement.nodeName != 'BODY' && toElement.nodeName != 'HTML'))
				toElement = toElement.parentNode;
			if(toElement == element) 
				return false;
			return true; /* forcément toElement != element donc toElement parent ou plus de element */
		}
        function random(min, max){
           return Math.random()*(max-min) + min
        }
        function mettre_angle(evt, elmt, min, max){

            var angle = 0;           
            if(evt.type == 'mouseover' && checkMouseOver(evt, elmt)){
				angle = random(min, max);
				if(angle < max && angle < 4 && angle >= 0)
					angle = 4
				else if(angle > max && angle > -4 && angle < 0)
					angle = -4
			}
			else if(evt.type == 'mouseout' && checkMouseOut(evt, elmt)){}
			else return;
			
			var img = elmt.getElementsByTagName('img')[0];
			
            //on applique l'angle
            img.style.MozTransform = 'rotate('+ angle +'deg)'; //Mozilla
            img.style.transform = 'rotate('+ angle +'deg)'; //Css 3
            img.style.WebkitTransform = 'rotate('+ angle +'deg)'; //Chrome et Safari
            img.style.OTransform = 'rotate('+ angle +'deg)'; //Opera
        }
        //-->
        </script>
    </head>
    <body>
        <div onmouseover="javascript:mettre_angle(event, this, -15, 15);" onmouseout="javascript:mettre_angle(event, this, 0, 0);" style="background-color : red;">
			<a href="site.php?id=id">
			<img src="img.jpg" alt="Nom du site" /><br />
			Nom du site
			</a>
        </div>
    </body>
</html>

si tu comprends pas regarde le lien que je t'ai donner

MERCI BEAUCOUP, ça marche du TONNERRE ;D !

fayçall

15 mai 2010 à 14:18:24

derien