In this blog we will see how we can make our clickable images more interactive in LWC.
Consider we have a lot of images on our component and each of them display some data when clicked/accessed. But for a user to figure out which element was clicked, it is always good to make those elements interactive.

To achieve this, I have used four images, 2 for each. One being the actual and the other being exact inverted. I then switch between those images during mouseover
and mouseout
events.
<template>
<table style="background-color:#0B2233; width:100%;" >
<tr style="height: 50%; table-layout: fixed; width:50%">
<td style="width: 50%;">
<table>
<tr>
<td style="width: 25%;"><img src={redCar} onmouseover={mouseOver} onmouseout={mouseOut} data-id="RedCar" /></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
<tr>
<td style="width: 25%;"></td>
<td style="width: 25%;"><img src={greenCar} onmouseover={mouseOver} onmouseout={mouseOut} data-id="GreenCar" /></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
</table>
</td>
</tr>
</table>
</template>
import { LightningElement } from 'lwc';
import SVG_CarGreen from '@salesforce/resourceUrl/GreenCar';
import SVG_CarGreenHover from '@salesforce/resourceUrl/GreenCarHover';
import SVG_CarRed from '@salesforce/resourceUrl/RedCar';
import SVG_CarRedHover from '@salesforce/resourceUrl/RedCarHover';
export default class HoverImages extends LightningElement {
greenCar = SVG_CarGreen;
greenCarHover = SVG_CarGreenHover;
redCar = SVG_CarRed;
redCarHover = SVG_CarRedHover;
mouseOver (evt) {
var dataId = evt.target.getAttribute('data-id');
switch(dataId) {
case "GreenCar":
this.template.querySelector(`[data-id="${dataId}"]`).src = this.greenCarHover;
break;
case "RedCar":
this.template.querySelector(`[data-id="${dataId}"]`).src = this.redCarHover;
break;
}
}
mouseOut (evt) {
var dataId = evt.target.getAttribute('data-id');
switch(dataId) {
case "GreenCar":
this.template.querySelector(`[data-id="${dataId}"]`).src = this.greenCar;
break;
case "RedCar":
this.template.querySelector(`[data-id="${dataId}"]`).src = this.redCar;
break;
}
}
}
showing arrow when user hovers over the column in html table without using lightning data table