Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #405629

    I found the following particular thread to see if it works:

    Aparently, this dosn’t seem to help.

    Basically, would like to replace the ‘hover’ effect on the Image Hotspots with a click effect in the same place. Any recommendations?


    Hey co4!

    Elliott’s code should work. Did you clear browser cache after implementing the code? What’s happening after you implement it? Can you post a link to your website showing the hotspots?




    I believe in the current version of the theme, the line you were referring to was on 686, also 699 looked like something similar, also tried changing the event to click. It still activated on hover.

    I also noticed that in the list of sources in chrome developer tools, enfold/config-templatebuilder/avia-template-builder/assets/js/avia-modal.js doesn’t show up, maybe it’s in another file as well?

    Anyway, our URL is . The map is on the home page.

    Another quick question that’s somewhat related. Do you have a recommended way to make the pins bigger? We tried making an image with bigger pins, and changed the width and height of the div, but they positioning moved down a bit. We can correct for this by either re-positioning the pins, or using a negative margin, but wanted to check with you guys first if there’s a cleaner way.


    • This reply was modified 4 years, 7 months ago by  co4.


    Please update Enfold to the latest version 3.0.8 –




    We upgraded to 3.0.8, then tried the modification suggested at

    It still does not seem to make a difference.

    There was a line in /js/avia.js that we changed mouseenter to click, and it stopped the hover effect, but it did not work on click.

    Please advise.




    Could you post the line/lines of code you changed please?



    In addition to the lines mentioned in the previous post above,
    Line 1624
    Change ‘mousenter’ to ‘click’

    This stopped the hover effect, but did not change it to work on click.
    (This line was changed back to default afterwards)



    For the image hotspots your supposed to edit the avia-modal.js file on line 681.

    It looks like your using custom images for the markers so to make them bigger you will need to use a bigger image.

    When I viewed your link there was also numbers being displayed on top of the markers which you can get rid of with this CSS.

    .av-hotspot-container .av-image-hotspot_inner { font-size: 1px !important; }




    As you can see (and as I mentioned in the initial post) in our own enfold/config-templatebuilder/avia-template-builder/assets/js/avia-modal.js, like 681 was changed to say ‘click’, but if you actually try out the page, it still shows up on hover (i.e., it’s not working). Are you able to please take a look? It appears that enfold/config-templatebuilder/avia-template-builder/assets/js/avia-modal.js isn’t even one of the js files being loaded. Can you help us get the open on click thing working? We’ve been going around in circles for a week on this.

    The numbers are temporarily there intentionally so that the client can tell us what to put where.



    Hmm, just tested again and it’s not working for some reason, sorry about that.

    Try opening up /enfold/js/avia.js and change line 1710 from this.

    event: 'mouseenter',       	//mousenter and leave or click and leave

    To this.

    event: 'click',       	//mousenter and leave or click and leave

    And then line 1769 from this.

    var target 		= this.options.event == "click" ? : e.currentTarget,

    To this.

    var target 		= e.currentTarget,



    Thanks, that did the trick, except the line numbers we have in our version is 1624 and 1683.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Image Hotspots Clickable rather than on Hover’ is closed to new replies.