Skip to main content
juan.delrio
Helper ⭐️⭐️⭐️
February 29, 2024
Solved

How to add image with mouse over image inside html widget

  • February 29, 2024
  • 4 replies
  • 86 views

So I built a custom html widget using html table to reproduce the multiproduct homepage with custom icons.   Now I want to add a mouse over image to the product images.  How do i do that?

Best answer by juan.delrio

<img src="image1" onmouseover="this.src='image2'" onmouseout="this.src='image1'" />

4 replies

juan.delrio
juan.delrioAuthorAnswer
Helper ⭐️⭐️⭐️
February 29, 2024

<img src="image1" onmouseover="this.src='image2'" onmouseout="this.src='image1'" />

lauro.lana
Gainsight Employee ⭐️
Gainsight Employee ⭐️
March 1, 2024

I haven't tried that before, but it sounds interesting. I didn't know about the onmouseover thing. Can you tell me where you've used it in your community?

juan.delrio
Helper ⭐️⭐️⭐️
March 1, 2024

So I wanted to create a Customer Facing Resource page that collects all our silos like the multiproduct page gainsight is using. But I wanted not square icons and I wanted 4 instead of 3 with out changing the home page which uses 3.  So I fell back on my good old HTML 4.0 roots and started with a table. :)

 

So now I have my 4 silos, with a descriptive mouse over for each one.   Now that I have the functional part out of the way, I can work on style :)

vishkatti
Gainsight Employee ⭐️
Gainsight Employee ⭐️
March 5, 2024

This is SO cool! Love it! Thanks so much for sharing Juan - This is super useful for the community :) 

"When you change the way you look at things, the things you look at change"