Title: Documentation for JS??
Last modified: June 4, 2026

---

# Documentation for JS??

 *  [Windmill Strategy](https://wordpress.org/support/users/windmillstrategy/)
 * (@windmillstrategy)
 * [4 days, 11 hours ago](https://wordpress.org/support/topic/documentation-for-js/)
 * I wanted to browse any documentation in order to add some custom JS functionality.
   I want the layers (icons you click) on the graphic to have some sort of active
   class so that the one corresponding to the currently active tooltip will have
   a class or data attribute to latch onto so I can add some CSS to make the icon
   look different when it is active. The link to the repo in the plugin page FAQ
   is broken. Any help you can provide would be much appreciated.

Viewing 1 replies (of 1 total)

 *  Plugin Support [Max](https://wordpress.org/support/users/mxlawr/)
 * (@mxlawr)
 * [4 days, 1 hour ago](https://wordpress.org/support/topic/documentation-for-js/#post-18929349)
 * Hello. I will show a sample. 
   1) Create a map with layers (img 1), add “**Extra
   CSS class**“, in my example it’s **“my-class”**
 * ![](https://i0.wp.com/i.ibb.co/PK3817Z/vision-img-01.jpg?ssl=1)
 * Img 1
 * 2) Define CSS styles for this layer with extra class, to use it we need go to
   the custom css tab, enable switcher and type our own styles.
 *     ```wp-block-code
       .my-class .vision-body {  background: #ff000050; // red with 50% opacity }
       ```
   
 * ![](https://i0.wp.com/i.ibb.co/wNsTm7z3/vision-img-02.jpg?ssl=1)
 * 3) Let’s write some js code. The plugin writes all markup directly into the page,
   so we can manipulate their elements easely. Go to the JS custom section and write
   this code (it changes layer background color after click)
 *     ```wp-block-code
       jQuery(document).ready(function($) {  $('.my-class').on('click', function(e) {    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16) + '40';    $(this).find('.vision-body').css('background', randomColor);  });});// you can get access to the plugin core by using "this" pointer// console.log(this);
       ```
   
 * ![](https://i0.wp.com/i.ibb.co/HDtNMcBp/vision-img-03.jpg?ssl=1)
 * 4) The result
 * ![](https://i0.wp.com/i.ibb.co/svLvMg4D/vision-img-04.jpg?ssl=1)
 * 
   P.S.I’d like to note that this plugin has limited functionality. I continue 
   to support it, but solely in terms of fixing critical bugs and ensuring compatibility
   with new versions of WordPress.
 * If you’re looking for something more, I suggest taking a closer look at [PicPoints](https://wordpress.org/plugins/picpoints/)–
   it’s has an advanced Figma-like interface, renders the map via Shadow DOM (so
   styles won’t conflict with either the theme or the plugin), allows you to draw
   complex polygons, and much more. The core functionality has already been written
   by me and development is still ongoing.
   If you have any suggestions or feature
   requests, I’m always open to them, feel free to reach out at any time.

Viewing 1 replies (of 1 total)

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdocumentation-for-js%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.

 * ![](https://ps.w.org/vision/assets/icon-256x256.png?rev=3122774)
 * [Vision - Interactive Image Map Builder](https://wordpress.org/plugins/vision/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/vision/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/vision/)
 * [Active Topics](https://wordpress.org/support/plugin/vision/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/vision/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/vision/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Max](https://wordpress.org/support/users/mxlawr/)
 * Last activity: [4 days, 1 hour ago](https://wordpress.org/support/topic/documentation-for-js/#post-18929349)
 * Status: not resolved