[Angular 5] Changer dynamiquent une image au survol

Bonjour, j'ai plusieurs images que j'affiche , et si je survole l'un d'entre eux je souhaites modifier cette image
voici mon template que j'ai testé:

Code:

---

1 2 3 4 5 6 7

<div class="menu three wide" *ngFor="let p of produit, let i = index">   <a (click)="onSelectMenu(menu)"> <img #croque (mouseenter)="survol(p.img)" (mouseout)="quit()" src={{racineImg}}{{p.img}}{{extImg}}> {{p.nom}} - {{p.prix}} euros </a> </div>

---

au moment ou je survole l'image avec mousenter je transmet p.img qui est le nom de l'image,
ce que j'essaye de faire c'est ensuite de modifier avec l'interpolation {{ p.img }} par une autre valeur connue

p.img non survolé par exemple = pizza
p.img survolé sera o_pizza

comment je dois m'y prendre au niveau du composant ?

les valeurs racineImg et extImg sont constant donc pas de problème mais comment arriver correctement à changer ce p.img au survole ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

export class ProduitComponent implements OnInit {   @Input() produit;     racineImg = '../assets/produits/'; extImg= '.png'; p.nom = 'image'; //cette attribut n'est pas correcte   survol(produit){//chargement de la 2ème image console.log("produit component:: produit ",produit); this.p.nom=produit }

---

comment je m'y prend pour arrive correctement à changer le nom de l'image ?

merci de votre réponse :)

Salut loin de connaitre angular 5, mais d'un point de vue JS pourquoi ne pas passer en paramètre lors du survol p au lieu de p.img de plus est tu sur des données? Idéalement et je sais pas si c possible sous angular 5 de lui passer l'objet html this en deuxième paramètre l'idée est de ciblé élément sur son attribut src. Dans ton cas tu as un split de la source qui pourrait poser des problème pourquoi pas passer une seule variable splitter en amont pour obtenir :

Pourquoi passer p au lieu de p.img pour avoir l'ensemble des données que tu utilise dans ta fonction survol, et pourquoi this, par que si c'est possible dans angular 5 tu poura ciblé en retour ton élément html par sa source this.src (avoir si c'est possible).

Code:

---

1 2 3

//... merger la source de l'image <img #croque (mouseenter)="survol(p, this)" (mouseout)="quit()" src={{image_source_formater_en_1}}>

---

Merci de ta réponse :), je n'avais pas encore utiliser this dans le template

Code:

---

1 2 3 4 5

<div id="produit" *ngFor="let p of produit,let i = index"> {{i}} <img (mouseenter)="survol(p,this)" src={{urlImg}}{{p.img}}{{ext}}> </div>

---

voici ce que cela donne:

Pièce jointe 328822

Code:

---

1 2 3 4 5 6

survol(name,courant){//chargement de la 2ème image console.log("survol",name,courant,"====");   }

---

je ne sais pas si avec cette astuce je vais y arriver , car au démarrage de la page, la boucle ngFor ne contient que la donne produit, qui ne connais pas la racine de l'url,
sinon lors de la récupération de la donnée sous forme json je devais faire une boucle et ajouter le préfix de l'url racine avant que le template soit chargé, si je souhaite le faire en un seul morceau.

Ou sinon je ne sais pas si c'est faisable mais de changer à la volé dans tout le component l'ensemble du src

Code:

---

1 2	src={{urlImg}}{{p.img}}{{ext}}

---

Je pense que je t'égare avec cette solution :(, néanmoins il serait plus judicieux de l'implémenté dans une directive ng https://angular.io/guide/attribute-directives et l'implémenter sur ta vue, ce qui parait simple en JS a implémenté ici : c'est un peu l'usine à gaz :aie:

Bonjour,
pourquoi ne pas utiliser l'objet $event ?

Ce qui pourrait donner quelque chose comme

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

import { Component } from '@angular/core';   @Component({ selector: 'my-app', template: ` <h1>Changement image sur <code>mouseover</code></h1> <div> <img src="images/image-1.png" (mouseover)="fctMouseOver($event)" (mouseout)="fctMouseOut($event)" data-over="images/image-1-over.png"/> <img src="images/image-2.png" (mouseover)="fctMouseOver($event)" (mouseout)="fctMouseOut($event)" data-over="images/image-2-over.png"/> </div> ` })   export class AppComponent{   fctMouseOver(e: any) : void { var oElem = e.target; oElem.saveUrl = oElem.src; oElem.src = oElem.dataset['over']; }   fctMouseOut(e: any) : void { var oElem = e.target; oElem.src = oElem.saveUrl; } }

---

merci pour la directive , j'ai testé et cela l'air de bien fonctionné :) (j'ai mis du temps à comprendre le tuto car l'exemple ne fonctionnais pas ...)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[survol]' }) export class HighlightDirective { constructor(private el: ElementRef) { }   @HostListener('mouseenter') onMouseEnter() { this.survol=this.highlight("../assets/croque.jpg");   }   @HostListener('mouseleave') onMouseLeave() { this.highlight(null); }   private highlight(url: string) { this.el.nativeElement.src =url; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import { Component,Input } from '@angular/core'; import { EventEmitter } from '@angular/core';   @Component({ selector: 'app-root', template: `   <img #produit survol src="../assets/ft.png">   `, styleUrls: ['./app.component.css'] }) export class AppComponent { @Input() src: string; constructor(){   } }

---

merci no smoking, je vais essayer de tenter aussi le $event, c'est peut être plus rapide, car

Pour le moment je dois survoler qu'une seul image, mais je suis dans une boucle (faudra t'il créer 10 directives pour 10 images) ...

edit:

j'ai testé la solution de transmettre directement dans la balise, cela fonctionne bien, maintenant il faut que je réussie à adapter la variable {{p.img}}

Code:

---

1 2 3 4 5 6 7

<img src="../assets/produits/classique.png" (mouseover)=" fctMouseOver($event)" (mouseout)="fctMouseOut($event)" data-over="../assets/produits/o_classique.png"/>   <img src="../assets/produits/semaine.png" (mouseover)=" fctMouseOver($event)" (mouseout)="fctMouseOut($event)" data-over="../assets/produits/o_semaine.png"/> </div>

---

l'ur de la deuxième image est calé sur la première il y a juste à rajouter "o_"

Code:

---

1 2 3

<img src="../assets/produits/semaine.png" (mouseover)=" fctMouseOver($event)" (mouseout)="fctMouseOut($event)" data-over="../assets/produits/o_semaine.png"/>

---

faut t'il faire un traitement dans la méthode (fctMouseOut) pour couper la chaine et la reconstruire

Code:

---

1 2	"../assets/produits/semaine.png"

---

en

Code:

---

1 2	"../assets/produits/o_semaine.png"

---

la concaténation n'existe pas si on utilise le databing du genre:

Code:

---

1 2	[src]="o_"+"p.image" //binding

---

Code:

---

1 2 3

<img src="p.imag" (mouseover)=" fctMouseOver($event)" (mouseout)="fctMouseOut($event)" data-over= ... ajoutre le prefix ..."p.img"/>

---

Si tu as toujours la même construction pour tes URL tu peux faire un classique

Code:

---

1 2 3 4 5 6

var srcURL = '../assets/produits/classique.png'; var newURL; srcURL = srcURL.split('/'); newURL = 'o_' + srcURL[srcURL.length - 1]; srcURL[srcURL.length - 1] = newURL; newURL = srcURL.join('/'); //>> ../assets/produits/o_classique.png

---

ok j'étais entrain de chercher avec la méthode split, ton script est plus rapide :)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

fctMouseOver(e: any) : void { var oElem = e.target; let urlCourant =oElem.src;//récupération de l'url image avant le survol oElem.saveUrl = oElem.src; //sauvegarde en mémoire l'image qui va être remplacé let finUrl =urlCourant.split("/"); let debUrl = urlCourant.split("/",5); console.log("split ::",finUrl[5]); console.log("url debut::",debUrl.join("/")); let urlHover = debUrl.join("/")+"/o_"+finUrl[5]; oElem.src=urlHover;   // oElem.src=this.prefix+parts ; // Splits on a single backslashparts; console.log(oElem.src); }   fctMouseOut(e: any) : void { console.log(e); var oElem = e.target; console.log("url avant::",oElem.saveUrl); oElem.src=oElem.saveUrl; }

---

tu sauvegarde dans l'objet l'url de l'image qui va être remplacé dans l'objet événement de la souris:

Pièce jointe 329115

si j'avais su chercher dans le e.target;, j'aurai peut être arrivé à le coder.
j'espère qu'il n'y aura pas de souci pour les version tactile avec le mouse event
en tout cas merci du script :)