Question 200845 in CSS Question posted in
Some basic documentation can be found here.

Change Image Path based on whether css class is active or hover or not in angular

I want to be able to change the src path based on the css class, when the user hovers li a:hover or when that li is active li a.active, the src path will be directed to "http://contohaja/inihover" but when it’s not, it’ll be directed to "http://contohaja/inipasbiasaaja"

mycomponent.component.html
    <li>
      <a
        aria-expanded="false"
        [routerLink]="['/restaurant-a']"
        [routerLinkActive]="['active']">
        <img class="logo-icon mr-3"/>
      </a>
    </li>

I don’t know how to do this in angular. Are there any tips to make it possible?

Tags:

3

Answers


  1. 0

    You can do that with pure CSS, don’t need javascript for that:

    <li>
  <a
    aria-expanded="false"
    [routerLink]="['/restaurant-a']"
    [routerLinkActive]="['active']">
      <img class="logo-icon mr-3" src="http://contohaja/inipasbiasaaja"/>
      <img class="logo-icon logo-icon-hover mr-3" src="http://contohaja/inihover"/>
  </a>
</li>

    li a .logo-icon-hover {
  display: none;
}

li a.active .logo-icon,
li a:hover .logo-icon {
  display: none;
}

li a.active .logo-icon.logo-icon-hover,
li a:hover .logo-icon.logo-icon-hover {
  display: block;
}
    Login or Signup to reply.
  2. 0

    One option is not use a img tag else a div

    <a class="div-img" href="#">
  <div ></div>
</a>

  a.div-img {
    display: inline-block;
  }
  a.div-img > div {
    background-image: url('assets/img/img1.jpg');
    background-repeat: no-repeat;
    min-width: 200px;
    min-height: 300px;
  }
  a.div-img:hover > div,
  a.div-img:active > div {
    background-image: url('assets/img/img2.jpg');
  }

    I supouse your imgs are in your folder assets/img, you can also use https

    Update if we want to have a "fade efect" we can also use some like

    <a href="#" class="fade-img">
  <img src='https://picsum.photos/200/300?random=3'>
  <img src='https://picsum.photos/200/300?random=4'>
</a>

    And a .css

      a.fade-img{
    display:inline-block;
    overflow:hidden;
  }
  a.fade-img:after{
    content:'';
    display:block;
    clear:both;
  }
  a.fade-img img{
    float:left;
    margin-right:-100%;
  }
  a.fade-img >img:last-child{
    opacity:0;
    transition:opacity .9s 
  }
  a.fade-img:hover > img:last-child{
    opacity:1;
    transition:opacity .9s 
  }

    a stackblitz

    Login or Signup to reply.
  3. 0

    You can approach this with state variables isHovered and isActive in your component,

    import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.css']
})
export class MyComponent {
  isHovered = false;
  isActive = false;

  getImagePath(): string {
    if (this.isHovered || this.isActive) {
      return 'http://contohaja/inihover';
    } else {
      return 'http://contohaja/inipasbiasaaja';
    }
  }
}

    Set your src attribute to the getImagePath() function and the mouse enter and leave event bindings each to a handler function onHover and onHoverOut

    <li [class.active]="isActive" (mouseenter)="onHover()" (mouseleave)="onHoverOut()">
  <a [routerLink]="['/restaurant-a']" [routerLinkActive]="['active']">
    <img class="logo-icon mr-3" [src]="getImagePath()" alt="none" />
  </a>
</li>

    The handler function can control the state variables and class changing logic. If user hovers li a element or it’s active, the src path will be http://contohaja/inihover, otherwise http://contohaja/inipasbiasaaja

    public isHovered: boolean = false;
public isActive: boolean = false;

public onHover(): void {
  this.isHovered = true;
}

public onHoverOut(): void {
  this.isHovered = false;
}

public setActive(active: boolean): void {
  this.isActive = active;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search