Need help for mouseover effect

Need help Plugins
1

Currently I am trying to make mouseover effect to show an image, but I can’t really make the image appear by the effect. Could anyone give me some suggestions?

image
image724×361 21.8 KB

image
image947×356 15.3 KB

2

I found some issues in your code:

  1. “attached” is undefined.
  2. I think you want to set the style “display” to “none” when mouseout, but if display = “none”, no event will be triggered because the element is disappeared and the user will not be able to hover on it.
  3. the function update can be triggered multiple times. You will probably create more than one “area1” element.
3

Hey @samsonlcl ,

here is what you can do:

  1. create a workflow: do when condition is true
  2. give condition: when element is hovered
  3. add action: element action > show or toggle (whatever suitable to you)
  4. add the element
    NOTE: make your img element as “not visible on page load”

I think this is the simple solution you can do.
hope this will help you.

what i prefer is not to use the codes as this is the platform to create apps or websites without coding. so use the functions provided by the platforms properly and minimise the use of codes.

4

If I just want to create one “area1” element for making the effect only, is it better for me to put the codes to initialize function?

5

I’ll put it in the function initialize if there is no dynamic data needed.

Also, @sart is right that we can actually build that feature with bubble workflow and condition.

6

In the update function, there is properties parameter that can access to the field declares, but in initialize function, there isn’t. Then how can I access the field? Is that just simply use the field name?

7

If you need the data from properties, you probably want to run the function in function “update”, because when the function “initialize” is triggered, the properties are not loaded yet.

To communicate between “initialize” and “update”, use the object instance.data. For example, instance.data.your_field. Both “initialize” and “update” can access instance.data.

8

Do you mean the following?

image
image1020×492 26.1 KB

image

9

Yes, but no.

This is how your plugin works right now:

  1. Initialize runs. instance.data.image is undefined.
  2. Update runs. instance.data.image = your image url.

As a result, your imgsrc.src will always be undefined. Moreover, you haven’t appended the img element to the div “area1”, so you won’t even see the img element.

So, please append the img element. For example:
area.appendChild(imgsrc);

You should also trigger a function in “Update” to modify the src of the image element.
For example:

let image = document.getElementById('img1');
image.src = properties.image

But really, I don’t understand why you need to code this.