Resize image toutes les n secondes sur un mouseover [résolu]

Bonjour,

existe-t-il une fonction javascript qui permettrait de redimensionner une image toutes les x secondes ?

par exemple la réduire de "1% toutes les 1 secondes" ?

merci
Modifié par regfish (30 Dec 2020 - 13:13)

Bonjour. Pour une fonction aussi basique votre solution ne devrait-elle pas se tourner vers le CSS ?

Exemple :

.reduce {
  transition: 5s transform;
}

.reduce:hover {
  transform: scale(.5);
}

Modifié par Olivier C (27 Dec 2020 - 23:05)

Bonjour, c'est une partie d'un exercice javascript et donc idéalement il me faudrait le faire en javascrit avec des events... mais je garde votre code de coté si jamais je ne trouve rien et je l'implémenterai avec des setattributes.

Merci

En gros il me faudrait cet effet :

    

myImg.addEventListener('mouseover', function(e){
        myImg.style.transition = 'all 1s ease';
        myImg.style.transform = 'scale(0.1)';


    })

    myImg.addEventListener('mouseleave', function(e){

        myImg.style.transition = 'all 1s ease';
        myImg.style.transform = 'scale(1)';

    })
}

sauf qu'idéalement ce serait plus "propre" que j'utilise 1px et une reduction toutes les secondes mais je ne vois pas trop comment faire.


EDIT :

j'ai trouvé une solution qui fonctionne (presque) correctement :

 var myImg = document.querySelector('footer > div > img');
    myImg.addEventListener('mouseleave', zoomIn);

    function zoomIn () {
        var realsize = document.getElementById('toto').width;
        var currentWidth=200;
        var interval = setInterval(function(){
            currentWidth++;
            myImg.style.width = currentWidth + 'px';

            if (currentWidth >= realsize) {
                clearInterval(interval);
            }
        }, 10);

    }

    myImg.addEventListener('mouseover', zoomOut);

    function zoomOut () {
        var currw = 100;
        var interval = setInterval(function(){
            currw--;
            myImg.style.width = currw + 'px';
            if(currw <= 0 ) {
                clearInterval(interval);
            }

        }, 10);

    }

Donc l'image disparait bien comme je le souhaite mais si je "mouse leave" alors ne revient pas à sa taille original.
Modifié par regfish (28 Dec 2020 - 12:07)

Bonjour,

1) Les spécifications qui disent "je vais changer la taille d'un élément (ou le déplacer ce qui est en général encore pire) quand je fais moveover ou mouseleave" sont presque toujours de mauvaises spécifications. La raison est que l'élément changeant de taille (ou de coordonnées), la souris va se retrouver à "entrer" ou "sortir" de l'élément alors qu'un effet en cours n'est pas fini. On ne le dira jamais assez : c'est vraiment difficile à maitriser.
2) Pour que le "mouseleave" marche, il faut aussi, une fois que l'élément a été réduit, revenir éventuellement sur l'élément pour pouvoir en "sortir" pour qu'il s'agrandisse à nouveau. Un utilisateur normalement constitué ne fait jamais ça. Et au passage, il faut éviter de réduire la taille de l'élément à 0, car on ne pourra jamais revenir dessus ensuite pour le ré-agrandir.
3) Pour éviter les effets de yoyo, on doit en plus combiner. La combine dépend de ce qu'on veut exactement .

Ceci étant, puisqu'il faut faire du js et gérer des évènements, voici une variante qui réduit l'élément sur un moveover, et ne s'arrête que quand on a atteint la moitié de la taille d'origine de l'élément (si on mettait 0 comme taille à atteindre, on ne pourrait jamais retourner sur l'élément). Et cette variante ré-augmente la taille de l'élément si on en sort jusqu'à ce qu'il atteigne sa taille initiale. Pour éviter les effets de yoyo, on bloque "l'autre" effet tant que l'effet "en cours" n'est pas terminé. Mais bien sûr, ce n'est qu'une possibilité parmi d'autres. Et pour voir l'effet de ré-augmentation, il faut, si la souris n'est plus sur l'élément, l'y déplacer pour pouvoir sortir de l'élément et déclencher l'effet d'agrandissement (c'est à l'utilisateur de faire ça, et c'est le côté pénible de la solution).

var myImg = document.querySelector('footer > div > img');
var intervala=0,intervalb=0;
var realsize = document.getElementById('toto').width;
	
function zoomIn () {
	var currw = document.getElementById('toto').width;
	if(!intervalb)
	{
		intervala = setInterval(function(){
			if (currw >= realsize) {
				clearInterval(intervala);
				intervala=0;
			}
			else {
				currw++;
				myImg.style.width = currw + 'px';
			}
		}, 10);
	}
}
myImg.addEventListener('mouseleave', zoomIn);
 
function zoomOut () {
	var currw = document.getElementById('toto').width;
	if(!intervala)
	{
		intervalb = setInterval(function(){
			if(currw <= realsize/2 ) {
				clearInterval(intervalb);
				intervalb=0;
			}
			else
			 {
				currw--;
				myImg.style.width = currw + 'px';
			}
		}, 10);
	}
}
myImg.addEventListener('mouseover', zoomOut);

Pour tester facilement, il vaut mieux "entrer" et "sortir" en arrivant sur l'élément en haut à gauche. Ça sera plus facile, ce coin ne bougeant (probablement) pas.

Mais ce serait mieux selon moi d'utiliser un évènement du type "click". On clique une première fois, l'image se réduit. On re-clique, l'image s'agrandit. On re-clique, l'image se réduit...

var myImg = document.querySelector('footer > div > img');
var intervala,intervalb;
var realsize = document.getElementById('toto').width;
var direction = 1;

function doClick () {
    var currw = document.getElementById('toto').width;
    if(direction>0)
    {
        direction = -1;
        intervalb = setInterval(function(){
            if(currw <= realsize/2 ) {
                clearInterval(intervalb);
            }
            else
            {
            	currw-=10;
            	myImg.style.width = currw + 'px';
            }
        }, 10);
    }
    else if(direction<0)
    {
        direction = 1;
        intervala = setInterval(function(){
            if (currw >= realsize) {
                clearInterval(intervala);
            }
            else
            {
            	currw+=10;
            	myImg.style.width = currw + 'px';
            }
        }, 10);
    }
}
myImg.addEventListener('click', doClick);

Enfin, on notera que la solution proposée par Olivier à base de css, est considérablement plus élégante. Mais bon, puisque c'est un exercice de javascript ...

Amicalement,

Salut Parsimonhi,
Juste une question en lisant ce code, pourquoi avoir un Int pour ta `direction` et pas un boolean ? De mon point de vue, on devrait renommer la variable pour que ce soit plus explicite mais il me semble qu'un boolean ferait l'affaire vu que tu utilises -1, 1 mais pas 0. Je passe peut-être à côté de quelque chose et je voudrais le savoir

Bonjour,

Voilà à quoi pourrait servir direction sous forme d'integer concrètement (j'ai aussi ajouté une encapsulation dans une fonction ne se déclenchant qu'une fois le contenu chargé, sinon, ça marchait parfois mal du fait qu'avant la fin du chargement du contenu, la largeur initiale de l'image pouvait ne pas être connue)  :

window.addEventListener('load',function(){
	var myImg = document.querySelector('footer > div > img');
	var interval = 0;
	var realsize = myImg.width;
	var direction = 10;

	function doClick(){
		var currw = myImg.width;
		direction = -direction;
		if(!interval){
			interval = setInterval(function(){
				if(((direction < 0)&&(currw <= realsize/2))
					||((direction > 0)&&(currw >= realsize))){
					clearInterval(interval);
					interval = 0;
				}
				else{
					currw += direction;
					myImg.style.width = currw + 'px';
				}
			}, 10);
		}
	}
	myImg.addEventListener('click', doClick);
});

Amicalement,
Modifié par parsimonhi (29 Dec 2020 - 15:01)

Je vous remercie pour votre réponse. Finalement j'ai pu trouvé la réponse avant de voir vos messages, et je prendrai le temps de tester les codes pour comparer .

ps : on est d'accord en css c'est bien plus simple et plus propre mais il m'était demandé de le faire en js.