Discussion :

[keokaz]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[headmax]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[headmax]

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

[NoSmoking]

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

Ce qui pourrait donner quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
  }
}

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[keokaz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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:



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