Skip to main content
juan.delrio
Helper ⭐️⭐️⭐️
Feb 29, 2024 7:58 PM UTC
Solved

How to add image with mouse over image inside html widget

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?

juan.delrio
Helper ⭐️⭐️⭐️
Feb 29, 2024 10:22 PM UTC

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

4 replies

juan.delrio
juan.delrioAuthorAnswer
Helper ⭐️⭐️⭐️
Feb 29, 2024 10:22 PM UTC

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

Translate
lauro.lana
Helper ⭐️⭐️⭐️
Mar 1, 2024 1:04 AM UTC

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?

Translate
juan.delrio
Helper ⭐️⭐️⭐️
Mar 1, 2024 2:12 AM UTC

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

Translate
vishkatti
Gainsight Employee ⭐️
Gainsight Employee ⭐️
Mar 5, 2024 3:54 PM UTC

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

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